I need to add a range for a date input field in jquery

Question

I've got an input field in a form that needs a date value. I'm using jQuery UI's datepicker for the calendar and I've set a range for it. However, the user can override that by typing a different date in the input field. How can I specify a date range for the field with jQuery validation? All I see with jQuery is that you can only specify that the field be a date type. Can I create min and max values that work with dates?

Answer 1

UPDATED

in responce to comment...

i can imagine many ways of doing this task, such as observing the keypress event, OR by checking like this startDate < myDate && myDate < endDate OR by doing regex etc..!

but the very simple and efficent way is by simply using the <input/> readonly property, so by having a sinple input like this:

<input type="text" name="dateRange" readonly="readonly" maxlength="10" />

you are sure no one can put date, except if they are using the datepicker!

that's all! ;-)

---

look like what exactly do minDate and maxDate

demo: http://jqueryui.com/demos/datepicker/min-max.html

$("#datepicker").datepicker({minDate: -20, maxDate: '+1M +10D'});

minDate: Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.

• http://jqueryui.com/demos/datepicker/#option-minDate

---

maxDate: Set a maximum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit.

• http://jqueryui.com/demos/datepicker/#option-maxDate

Answer 2

You just need to add a setting to Datepicker to make it so they can't edit the text field:

$( ".selector" ).datepicker({ constrainInput: true });

jQuery UI Documentation