Response title
This is preview!
Move this topic
jQuery UI Datepicker Validation plugin
in Using jQuery UI
•
10 years ago
I've developed a plugin to allow fields with jQuery UI Datepicker functionality to be validated. Just add the plugin to your page after the Datepicker and Validate plugins, then add the dpDate class to your fields or to the rules section of the validate call. The plugin checks the date format, any minimum/maximum dates set, and any beforeShowDay callback affecting selectability.
Replies(14)
Re: jQuery UI Datepicker Validation plugin
9 years ago
THanks in a million!! I've found out, that I need to have validate.js and not validate.min.js, otherwise I would still get error message. So I guess it's best to use whole package of javascript file.
thanks again!
thanks again!
Leave a comment on themre's reply
Leave a comment on vimaldhaduk's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
Hey dude, thanks for the plugin.
I'm having a few problems though, for some reason i don't get errors when i select an invalid date.
Here's my code:
Your help is greatly appreciated.
I'm having a few problems though, for some reason i don't get errors when i select an invalid date.
Here's my code:
- <!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> Test for date picker</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/south-street/ui.all.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="./scripts/jquery.validate.js"></script>
<script type="text/javascript" src="./scripts/jquery.ui.datepicker.validation.js"></script>
<script type="text/javascript">
$(function(){
$('#validBeforeDatepicker, #validAfterDatepicker').datepicker();
$('validateForm').validate({
rules:{
startDate:{
required: true,
dpDate: true
}
}
});
});
</script>
</head>
<body>
<form id="validateForm" action="#" >
<p>
Select Date:
<input type="text" id="validBeforeDatepicker" name="validTodayDatepicker" > to
<input type="text" id="validAfterDatepicker" name="validAfterDatePicker" >
</p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Your help is greatly appreciated.
Leave a comment on emangalu's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
There are two problems here:
1. You need an initial '#' to be able to select the form by its ID.
2. The validate rules use the field name as the identifier.
1. You need an initial '#' to be able to select the form by its ID.
2. The validate rules use the field name as the identifier.
- $(function(){
- $('#validBeforeDatepicker, #validAfterDatepicker').datepicker();
- $('#validateForm').validate({
- rules:{
- validTodayDatepicker:{
- required: true,
- dpDate: true
- }
- }
- });
- });
Re: Re: jQuery UI Datepicker Validation plugin
8 years ago
Thank you, that resolved my problem. Great plugin btw... :)
Leave a comment on kbwood.au's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
I'd like you to know that this is the first example of date picker to work for me - to at least put up calendars.
Congrats on being able to explain JQ better than its authors.
Of course, next, I have no clue as to where the 2 dates are stored, and how to get at them for use... but at least you bring up a green map! That's a huge step forward...
Leave a comment on nickbaer's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
Hi.
I've read a lot about this plugin. I chose it for validation features. But I've been trying to see at least one letter of the error message for 2 hours! I can't understand what should I do for that.
It works fine only for choosing date and doesn't let enter nondigit symbols.
May be somebody helps me to solve this problem&
Here is my code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> Test for date picker</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/south-street/ui.all.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.validation.min.js"></script>
<script type="text/javascript">
$(function () {
$('#validMinMaxDatepicker').datepicker({ minDate: -7, maxDate: +7 });
$('#validateForm').validate({
errorPlacement: $.datepicker.errorPlacement,
rules: {
validMinMaxDatepicker: {
required: true,
dpDate: true
}
}
});
});
</script>
</head>
<body>
<form id="validateForm" action="#" >
<p>
Select Date:
<input type="text" id="validMinMaxDatepicker" name="validMinMaxDatepicker" class="dpDate">
</p>
<input type="submit" value="Submit">
</form>
</body>
</html>
And how can I show different error messages for "invalid date format" (like "34/22/2012") and "this date has already passed"?
I've read a lot about this plugin. I chose it for validation features. But I've been trying to see at least one letter of the error message for 2 hours! I can't understand what should I do for that.
It works fine only for choosing date and doesn't let enter nondigit symbols.
May be somebody helps me to solve this problem&
Here is my code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> Test for date picker</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/south-street/ui.all.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.validation.min.js"></script>
<script type="text/javascript">
$(function () {
$('#validMinMaxDatepicker').datepicker({ minDate: -7, maxDate: +7 });
$('#validateForm').validate({
errorPlacement: $.datepicker.errorPlacement,
rules: {
validMinMaxDatepicker: {
required: true,
dpDate: true
}
}
});
});
</script>
</head>
<body>
<form id="validateForm" action="#" >
<p>
Select Date:
<input type="text" id="validMinMaxDatepicker" name="validMinMaxDatepicker" class="dpDate">
</p>
<input type="submit" value="Submit">
</form>
</body>
</html>
And how can I show different error messages for "invalid date format" (like "34/22/2012") and "this date has already passed"?
Leave a comment on paltan7's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
Change the messages by setting datepicker defaults:
Possible messages (and their defaults) are:
validateDate: 'Please enter a valid date',
validateDateMin: 'Please enter a date on or after {0}',
validateDateMax: 'Please enter a date on or before {0}',
validateDateMinMax: 'Please enter a date between {0} and {1}',
validateDateCompare: 'Please enter a date {0} {1}',
validateDateToday: 'today',
validateDateOther: 'the other date',
validateDateEQ: 'equal to',
validateDateNE: 'not equal to',
validateDateLT: 'before',
validateDateGT: 'after',
validateDateLE: 'not after',
validateDateGE: 'not before'
- $.datepicker.setDefaults({validateDate: 'Not a date',
- validateDateMinMax: 'Nope, from {0} to {1}'});
Possible messages (and their defaults) are:
validateDate: 'Please enter a valid date',
validateDateMin: 'Please enter a date on or after {0}',
validateDateMax: 'Please enter a date on or before {0}',
validateDateMinMax: 'Please enter a date between {0} and {1}',
validateDateCompare: 'Please enter a date {0} {1}',
validateDateToday: 'today',
validateDateOther: 'the other date',
validateDateEQ: 'equal to',
validateDateNE: 'not equal to',
validateDateLT: 'before',
validateDateGT: 'after',
validateDateLE: 'not after',
validateDateGE: 'not before'
Leave a comment on kbwood.au's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
Thanks for the answer. But....
I still can't see ANY validation messages.
I'm asking again:
1. Is there smth wrong with code, listed in my previous message? Validation still doesn't work...
I still can't see ANY validation messages.
I'm asking again:
1. Is there smth wrong with code, listed in my previous message? Validation still doesn't work...
Leave a comment on paltan7's reply
Re: jQuery UI Datepicker Validation plugin
8 years ago
Your code works for me. Can you provide the URL of a page that demonstrates the problem?
Leave a comment on kbwood.au's reply
Re: jQuery UI Datepicker Validation plugin
7 years ago
Yeah its not working for me either. Funny thing is the author saying its working but never showing a single full example in his page. If someone has a full example to share it will be appreciated.
Cheers.
Leave a comment on luciofer's reply
Re: jQuery UI Datepicker Validation plugin
7 years ago
Here is the working example using the original code versions. Note that the paltan7's code above didn't include the Validation plugin itself.
Leave a comment on kbwood.au's reply
Re: jQuery UI Datepicker Validation plugin
7 years ago
Hi.
I am getting the error:
TypeError:$(...).validate is not a fuction
I added this to my header:
<script type="text/javascript" src="js/jquery.ui.datepicker.validation.js"></script>
Though I can see that I also should add a file called jquery.validate.js. But where do I find this file? It is not contained in the downloaded package called: jquery.ui.datepicker.validation.package-1.0.1
My code looks like this:
$(function() {
$('#validDefaultDatepicker').datepicker();
$(form1).validate({
rules: {
startDate: {
required: true,
dpDate: true
}
}
});
$( "#textbox").datepicker();
});
<body>
<form id="form1" action="">
<p>Dato: <input type="text" id="textbox" /></p>
</form>
</body>
Thanks in advance
I am getting the error:
TypeError:$(...).validate is not a fuction
I added this to my header:
<script type="text/javascript" src="js/jquery.ui.datepicker.validation.js"></script>
Though I can see that I also should add a file called jquery.validate.js. But where do I find this file? It is not contained in the downloaded package called: jquery.ui.datepicker.validation.package-1.0.1
My code looks like this:
$(function() {
$('#validDefaultDatepicker').datepicker();
$(form1).validate({
rules: {
startDate: {
required: true,
dpDate: true
}
}
});
$( "#textbox").datepicker();
});
<body>
<form id="form1" action="">
<p>Dato: <input type="text" id="textbox" /></p>
</form>
</body>
Thanks in advance
Leave a comment on Romio Chikaz's reply
Re: jQuery UI Datepicker Validation plugin
7 years ago
See the Validation plugin Web site to get this file.
Leave a comment on kbwood.au's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to kbwood.au's discussion
{"z3128300":[14737000003214507,14737000003334990],"z7192191":[14737000002951259],"z19380579":[14737000003359433],"z2954172":[14737000004092229],"z20321491":[14737000003455956,14737000003458260],"z2953500":[14737000001684919,14737000003332479,14737000003458170,14737000003458868,14737000004097079,14737000004821349],"z8229682":[14737000002952533],"z30024333":[14737000004724001]}
Statistics
- 14 Replies
- 63839 Views
- 1 Followers