CODEWITHSUNDEEP
jqueryjquery-ui
TomC
TomC

Reputation: 139

jQuery UI Datepicker: manual date entry can be incorrect bug

No example code here, just a standard jQuery UI datepicker with a minDate and maxDate...

the problem occurs with manual keyboard entry. If I enter the date in the approved format mm-dd-yyyy and I have my mindate set to -60 (the last 60 days) I can enter a date older than 60 day limit displayed in the datepicker manually with the keyboard.

If I press enter, the mindate gets set correctly, BUT if I tab to the next field on the form (which would be what the standard user would do) the invalid older date stays in the field and can be submitted.

Is there a way to force the date to be checked/corrected in regards to the mindate? I have seen some validation plugin solutions, but these don't give me access to the mindate that I am aware of. Or is there a way to disable manual keyboard entry of the date?

Upvotes: 1

Views: 4061

Answers (2)

TomC
TomC

Reputation: 139

mcgrailms answer works and works well. We did notice some confusion when testing, as clicking in the input box and getting a blinking cursor led to an initial attempt at typing and then confusion over why nothing happened. What I implemented is this:

On the jQuery UI datepicker I added

beforeShow: function() {
  jQuery('#installation_date').css("visibility","hidden")
},

onClose: function() {
  jQuery('#installation_date').css("visibility","visible")
}

This gives us a simultaneous appearance of the datepicker, with a hiding of the textbox and then a reappearance of the textbox with the picked date, as soon as the date is picked. Technically the textbox is still there and input could be entered, but the transition helps guide the user to picking the date from the datepicker.

Upvotes: 0

mcgrailm
mcgrailm

Reputation: 17638

here is an interesting solution just make the input readonly

like this

 <input type="text" class="datepick" readonly="readonly"/>

and jquery

         $('.datepick').datepicker();

WORKING DEMO

Upvotes: 4

Related Questions