We help IT Professionals succeed at work.

Can jQuery Date Picker be made to force date validation?

curiouswebster
on
I am about to commit to using jQuery Date Picker since I do n ot want to code custom date validation. But when I type an invalid date (2/30/2011) into the text field here:

http://jqueryui.com/demos/datepicker/#dropdown-month-year

nothing happens.

Can validation be turned on? OR, is there an easy way for me to find out the entered a date and that jQuery Date Picker consider it invalid?

Thanks!
Comment
Watch Question

HainKurtSr. System Analyst
BRONZE EXPERT
Commented:
check the events

http://docs.jquery.com/UI/Datepicker#events

and use something like this to validate the date

$.datepicker.parseDate('yy-mm-dd', '2007-01-26');
curiouswebsterSoftware Engineer

Author

Commented:
Outside of format errors, I want to rely fully on the Date Picker for date validation of dates. I want to be able to easily determine that:

2/30/2011 is not valid but do not want to code the logic about Febrary and leap years.

How can I easily use that kind of validation?

Thanks.
leakim971Multitechnician
SILVER EXPERT
Distinguished Expert 2019
Commented:
you can make the field readony : http://jsfiddle.net/CEZn7/2/
curiouswebsterSoftware Engineer

Author

Commented:
That's one solution, for sure. But that makes it harder for me to convince people the Date Picker will improve the user experience. It's kind of strange to have a text file that does not work. Can't I catch an event every time they update that field, then when they have inputted a properly formatted date, check the date's validity with the Date Picker?

Curious.
SILVER EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
>>. But that makes it harder for me to convince people the Date Picker will improve the user experience.
Well, when they click on the field, the only option is to select from the calendar, which will only show you valid dates.  They can't get it wrong!

>>It's kind of strange to have a text file that does not work.
Well, to correctly state that it does not work, then when you click on the readonly field, nothing would happen.  However, if you do things correctly, you can click on the field and datepicker pops up.  If you get it to behave like this, then its inaccurate to claim that "it does not work". As a matter of fact you could get rid of the text field altogether and instead use a "calendar" icon, so that when it gets clicked, the datepicker would come up.

>>Can't I catch an event every time they update that field, then when they have inputted a properly formatted date, check the date's validity with the Date Picker?
Well, apparrently YOU can't ( have a sense of humor - you set yourself up for that one :)).  But here's how I would do it.

Regards,
Hielo
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<base href="http://jqueryui.com/demos/datepicker/dropdown-month-year.html" />
	<meta charset="utf-8"> 
	<title>jQuery UI Datepicker - Display month &amp; year menus</title> 
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
	<script src="../../jquery-1.6.2.js"></script> 
	<script src="../../ui/jquery.ui.core.js"></script> 
	<script src="../../ui/jquery.ui.widget.js"></script> 
	<script src="../../ui/jquery.ui.datepicker.js"></script> 
	<link rel="stylesheet" href="../demos.css"> 
	<script> 
	$(function() {
		$( "#datepicker" ).datepicker({
			changeMonth: true,
			changeYear: true,
			onClose: function(dateText, inst) { 

				if( dateText != $.datepicker.formatDate( $.datepicker.regional[''].dateFormat, Date.parse(dateText ) ) )
				{
					alert("The data specified is not valid")
					this.value='';
				}
			}
		});
	});
	</script> 
</head> 
<body> 
 
<div class="demo"> 
 
<p>Date: <input type="text" id="datepicker"></p> 
 
</div><!-- End demo --> 
 
 
 
<div class="demo-description"> 
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> 
</div><!-- End demo-description --> 
 
</body> 
</html>

Open in new window

curiouswebsterSoftware Engineer

Author

Commented:
Thanks!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.