简体   繁体   中英

Combinig JQuery datapicker with input field validation /filter

I am using the JQueryui Datepicker. But it doesn't really affect values entered manually in the input-field. Is there some way I can use the same (client) code to specify mask / validation on the input field (when the datapicker is not used - not just have datepicker output the correct format).

What would be the most consistent way to do this in the JQuery framework?

Thanks

Remarks

  1. It seems jQuery put som restraints on input (Ie I can only enter digits- mask "yymmdd") so the main thing is to get validation.

Assuming you're using the Validate plugin, you can write a custom rule which reimplements ui.Datepicker's own logic for deciding which dates are selectable or not. I had to write this today and figured someone else could benefit from knowing how:

jQuery.validator.addMethod("vdate", function(value, element) {
    // Datepicker's internal method for choosing selectable ported to a custom validator method.
    // All criteria are the same, except othermonth is omitted.
    var inst =          $.data(element,'datepicker'); // instance data used internally by datepicker's functions
    var printDate =     $(element).datepicker("getDate");
    var minDate =       $.datepicker["_getMinMaxDate"](inst, 'min', true);
    var maxDate =       $.datepicker["_getMinMaxDate"](inst, 'max');
    var beforeShowDay = $.datepicker["_optionDatepicker"](element,'beforeShowDay');
    var daySettings =   (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
    var unselectable =  (!daySettings[0] || (minDate !=null && (printDate < minDate)) || (maxDate !=null && (printDate > maxDate)));
    return (this.optional(element) || !unselectable);
}, "Please choose a valid date");

This particular addMethod has the advantage of checking each field individually, so if you have multiple datepickers sharing the classname 'vdate' but perhaps having different minDate/maxDate/beforeShowDay settings, Validate will check and follow each datepicker's own rules.

Also, if you've written a complicated function for beforeShowDay that excludes weekends, days whose numbers are prime, your wife's birthday, and the last day of every month, so long as it works in ui.Datepicker, Validate will recognize all of them as invalid dates as well.

Is there any reason you can't do the simplest possible thing?

Hook into an event, eg on the date field's blur, and check the values like below:

  1. Compare the length of the input against the format.
  2. Parse the date and attempt to create a date object to verify the date is an actual date.

您可以使用日期选择器的formatDate选项: http : //docs.jquery.com/UI/Datepicker/formatDate

Use the jQuery Validation plug-in . It coexists with the UI date picker; we do this in our applications. Be aware that the default date validator will not flag clearly invalid dates such as "February 40th, 2009" because it uses the JavaScript date parser, which is more than a little bit lax about what it accepts. But it's really easy to replace the default validator with one of your own .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM