Datepicker requiring page refresh to operate after first operation - what do I need to reset ?
I'm using Datepicker on an input field , eg:
<input type='text' name='next_send' class='DateInputField' value='18-APR-2013' maxsize='15' size='15'>
The DIV is (re)loaded by a jQuery load() call, ie:
$("#results").load(g_cgi + "?action=SDIeditForm&NoticeID=" + l_NoticeID,
function () {
$('.DateInputField').datepicker({ dateFormat: 'dd-M-yy', minDate: '-1m', maxDate: '+2y' });
} );
The first time I go to the page, the Datepicker works fine. When I subsequently load the page again it does not re-instate the focus or change events - and therefore does not work atall !
It was previously attached to a $(document).ready event, but after reading a post here I changed it to the recommended "initiate after $.load()" style, but it made no difference. I also tried preceding it immediately with a $('.DateInputField').datepicker( 'destroy' ); call, but that didn't change anything.
If I refresh the page in the browser and then reload the page, it works again: but again only the first time.
Sorry - it's not on a public site, so I can't refer you to a URL.
Incidentally, I made some css tweaks in my css file to stop it flickering / make the prev/next buttons work, etc:
/* move the prev/next buttons - they ship one above the other and are unusable as they move when hovered */
a.ui-datepicker-prev {
float: left; /* place the prev button on the left of the widget - same line as the month */
}
a.ui-datepicker-next {
float: right; /* place the next button on the right of the widget */
}
.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
border: none; /* stops the hovering over the prev/next buttons from affecting the rest of the dialogue */
}
.ui-datepicker-title {
text-align: center;
font-size: 0.8em; /* Otherwise "September" is placed on the line below the prev/next buttons */
}
[ jQuery UI v1.10.2 with jQuery 1.9.1 - Chrome; IE9; FF 19.0.2 and 20.0 - it just updated when I went to Help/About! ]