开发者

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

开发者 https://www.devze.com 2022-12-30 23:12 出处:网络
I\'ve got an input field in a form that needs a date value.I\'m using jQue开发者_Go百科ry UI\'s datepicker for the calendar and I\'ve set a range for it.However, the user can override that by typing a

I've got an input field in a form that needs a date value. I'm using jQue开发者_Go百科ry 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?


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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消