I just downloaded the latest files needed to use the Datepicker from GitHub, and I've found two issues that may already been addressed here, but looking back two years though this form, I didn't see anything addressing these two issues and a question:
1) When I first open a page containing a datepicker, if I press the enter key in the datepicker input field or type an incomplete date, say 1 or 12, into the datepicker's text box while the calendar is showing and then press enter key, the current date overwrites the value I typed into the field. This doesn't happen when I type in a valid, complete, date with either two or four digits in the year. It only happens the first time I do this. Returning to the field and entering an invalid date or partial date isn't again replaced by the current date, and the code that I've attached to the datepicker's change and blur events to highlight an invalid date and holds the focus in the field works. Replacing the empty value with the current date would be fine, but replacing the invalid date shouldn't never happen. This also happens in the datepicker demo.
2) The
defaultDate: +
7 option shown in the API Documentation for Datepicker doesn't highlight a date in the calendar, as described. Note that for the first issue, I'm not using this feature. There isn't a demo on this option, so I can't say if this happens only on my page or not.
I am running Chrome
Version 51.0.2704.103 m on a Windows 10 system. Here is the datepicker initialization code that I'm using:
//
// Set the initial options for each of the datepickers having the datepiker class.
//
$( function() {
$( '.datepiker' ).datepicker( {
appendText: ' <i>(mm/dd/yyyy)</i>',
dateFormat: 'mm/dd/yy',
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
autoSize: true,
changeMonth: true,
changeYear: true,
constrainInput: true,
showButtonPanel: true,
closeText: "Close"
} ).on( 'change', function() { // The code in these two events came from a solution found in this forum.
//
// Only allow null or dates with, one or two digits / one or two digits / two or four digits.
//
if( !this.value.match( /^(?:\d{1,2}\/\d{1,2}\/(?:\d{2}){1,2})?$/ ) ) {
this.style = "background-color: yellow; color: red;";
document.here = this; // Save the active datepicker to the global variable, here,
setTimeout( document.here.focus(), 0 ); // which is used to trapped the focus here while the date // is invalid.
}
else
this.style="background-color: white; color: black;";
} ).on( 'blur', function() {
$(this).trigger( 'change' );
} )
} );
Here is the input field that I'm using for the datepicker:
Date C: <input type="text" id="datepickerC" class="datepiker" />
The question, how do I style the Today button to look like the Close button? Right now it looks inactive, even though it works when I click it.