Datepicker Validation无法使用jquery插件

我有从诸如datepicker选择/输入日期的场景。 我为datepicker使用了jquery插件。 它工作得很好。

正如我之前所说，用户还可以直接在文本框中输入日期，而不是从日历中选择。 在这个阶段，我们都知道用户可能碰巧错误地输入了日期。 因此我介入了jquery datepickervalidation插件。 在那里，我发现了一些文章要继续。

有用的链接如下，

keithwood

的jsfiddle

Chridam说

我尝试的是：

正如第一个链接所说（Keith wood），我尝试使用datepicker.validation.js。 但是当我输入错误的日期时没有任何反应。 以下是我试过的完整代码，

            
  $('#validateForm').validate({ errorPlacement: $.datepicker.errorPlacement, rules: { validDefaultDatepicker: { required: true, dpDate: true }, validBeforeDatepicker: { dpCompareDate: ['before', '#validAfterDatepicker'] }, validAfterDatepicker: { dpCompareDate: { after: '#validBeforeDatepicker' } }, validTodayDatepicker: { dpCompareDate: 'ne today' }, validSpecificDatepicker: { dpCompareDate: 'notBefore 01/01/2012' } }, messages: { validFormatDatepicker: 'Please enter a valid date (yyyy-mm-dd)', validRangeDatepicker: 'Please enter a valid date range', validMultiDatepicker: 'Please enter at most three valid dates', validAfterDatepicker: 'Please enter a date after the previous value' } });  
 Select Date: 
  $(function () { $('#validDefaultDatepicker').datepicker(); });   

根据第二个链接（chridam），我直接尝试使用type = date概念。 它给了我希望，因为它完美地运作。 虽然解决方案很好，但它不适用于IE浏览器。 以下是完整的代码，

         $(function () { $("#jQueryValidateTest").validate(); $("[type=date]").datepicker({ onClose: function () { $(this).valid(); } }); });   .valid { background: green; color: #fff; } .error { background: red; color: #fff; }    
 
 
 
  
​ 
 
 
   

希望我不要混淆你。 请帮助我克服这个障碍。 提前致谢。

Answer 1

如果我完全理解您的问题，您希望对日期进行自定义输入validation。 这是我最近在航class预订网站上遇到的一个问题（ 现场直播 ）

有一点可以肯定的是，类型为date输入字段很好，但不是非常x-browser，因为它们是自己的日期格式，具体取决于设备/操作系统/浏览器文化。 所以我的解决方案是text输入类型。 它还使用jquery UI datepicker和不显眼的validation插件。

为了克服这个障碍，除了缺少手动输入validation之外，jQuery UI datepicker中的IS的一大优势是选项constrainInput ，其仅允许字符按其当前格式。 这已经是一个巨大的胜利！

在第二个注释中，jQuery UI还附带了文化文件，以针对自定义格式实例化datepickers。

在此基础上，我相信需要一种自定义validation方法。 然后，与您的设置相比，一个很大的区别可能是使用minDate和maxDate选项。 不确定这是否适用于您，但这就是我如何正确validation它。

 /** * @description resolves an issue with chrome & safari date validation * @param {String} format : regional dateformat */ setValidator: function (format) { var self = this, // scope settings = this.settings, // object literal data = settings.data, // mapping for data-attributes options = settings.options; // my custom behavior options $.validator.addMethod('date', function (value, element) { var inst, // jquery ui datepicker data inst object => very handy parts, // split the user input minDate = new Date(), // create a min range maxDate = new Date(minDate), // create a max range newDate; // the date to be validated in the end // unrequired fields if (this.optional(element)) { return true; } try { // get the data instance from the element, put there by jquery-ui // warning: inline datepickers have their instance on the resp. div inst = options.isInline ? self.findDatepicker($(element)).data(data.datepicker) : $(element).data(data.datepicker); // determine the epoch timestamps of the input, based on the options minDate and maxDate, for calculation minDate = typeof inst.settings.minDate === 'object' ? inst.settings.minDate.getTime() : minDate.setDate(minDate.getDate() + parseInt(inst.settings.minDate.replace(/[+d]/g, ''), 10)); maxDate = maxDate.setDate(maxDate.getDate() + parseInt(inst.settings.maxDate.replace(/[+d]/g, ''), 10)); // correct months 0-based // correct 2digit years // add hours to the maxDate parts = value.split('/'); if (parts.length === 3) { parts[0] = parseInt(parts[0], 10); parts[1] = parseInt(parts[1], 10) - 1; parts[2] = parseInt(parts[2], 10) < 100 ? parseInt(parts[2], 10) + 2000 : parseInt(parts[2], 10); // notice how I switch the parts against the default format newDate = new Date(parts[2], parts[1], parts[0], 23, 59, 59, 0).getTime(); if ($(element).data(data.maxdate)) { newDate = newDate - (new Date(newDate).getHours() * 60 * 60 * 1000); } // unfortunately not very usefull as it doesn't return anything when false => value.split('/') //$.datepicker.parseDate(format, value); } else { newDate = 0; } return newDate >= minDate && newDate <= maxDate; } catch (err) { console.log(err); } }); } 

基本上我遍历每个jQuery datepicker：

• 使用ajax => '/scripts/lib/jquery-ui/ui/i18n/datepicker-{{culture}}.js' i18n/datepicker-{{culture}} '/scripts/lib/jquery-ui/ui/i18n/datepicker-{{culture}}.js'从i18n文化文件中获取/设置文化
• 使用param => self.setValidator(regional.dateFormat);格式设置validation器self.setValidator(regional.dateFormat);
• 设置datepicker => $('.datepicker').datepicker(options);

希望有一点意义或至少推动你朝着正确的方向发展。 如果有什么不清楚的地方，请不要问...因为我意识到这不是复制/粘贴解决方案^^