你如何让剑道日期选择器对最短日期进行日期验证?

Posted

技术标签:

【中文标题】你如何让剑道日期选择器对最短日期进行日期验证?【英文标题】:How do you make a kendo datepicker do date validation for a minimum date? 【发布时间】:2014-01-29 22:50:04 【问题描述】:

我有以下控制:

@(html.Kendo().DatePickerFor(model => model.Attributes.DueDate)
    .HtmlAttributes(new  
        ID = "idSurvey_DueDate", 
        @data_bind = "value: DueDate", 
        @Class = "report-label datepicker surveyAttributesData", 
        TabIndex = 3 )
    .Min(DateTime.Now)                                                            
)

还有下面的jquery:

$("#idSurvey_DueDate").kendoValidator(
    rules: 
        dateValidation: function (e) 
            var currentDate = kendo.parseDate($(e).val());
            // Check if date parse was successful
            if (!currentDate) 
                return false;
            
            return true;
        
    ,
    messages: 
        dateValidation: "Invalid Date!",
        min: "Date must not be in the past!"
    
);

当我对此进行测试并输入无效日期时,我收到的消息不是我所期望的。相反,它是“字段 DueDate 必须是日期”。这个神秘消息来自哪里,为什么不使用我放入验证器的 messages 属性?我想要的只是不允许无效的日期格式,并且日期不是过去。所以必须执行最低限度。

【问题讨论】:

您是否通过 DataAnnotations 或 FluentValidation 使用服务器端验证? 据我所知我都没有使用? 【参考方案1】:

这段代码似乎运行良好:

$("form").kendoValidator(
  rules: 
    dateValidation: function(element) 
      var value = $(element).val();

      var date = kendo.parseDate(value);
      if (!date) 
        return false;
      

      return true;
    ,
    minDate: function(element) 
      var value = $(element).val();

      var date = kendo.parseDate(value);

      var result = date >= new Date();

      return result;
    
  ,
  messages: 
    dateValidation: "You must enter a date",
    minDate: "The date must not be in the past"
  
);

这是一个现场演示:http://jsbin.com/EvoroRe/1/edit

【讨论】:

我最终没有使用 kendoValidator 而是使用错误列表,但您的代码也可以工作,所以我会支持它。当我使用 kendoValidator 时,它只是将错误消息文本放在其他表单的方式中,而我希望将它放在一个中心位置。【参考方案2】:

我建议添加mvcdate规则:

rules: 
    mvcdate: function (input) 
        var datarole = $(input).data('role');
        if (datarole === 'datepicker') 
            var value = $(input).val();
            if (value) 
                var date = kendo.parseDate(value, 'ddd, MMM d');
                if (!date) 
                    return false;
                
            
        

        return true;
    
,
messages: 
    mvcdate: function (intput) 
        return intput.attr('data-val-date');
    

不幸的是,dateValidation 规则的优先级低于 datemvcdate,因为它们是默认的,也不是自定义的。据我了解,mvcdate 规则具有最高优先级,因为:

dateValidation 规则已被某些控件跳过,我收到“必须是日期”错误 date 规则已通过,结果为 TRUE,但我仍然收到“必须是日期”错误 mvcdate rule 帮助了我一个人。

您始终可以在控制台中查看 kendoValidator:

【讨论】:

【参考方案3】:

我不确定 kendo 验证器是否在接受答案后发生了变化,但您需要过滤掉并仅将日期验证应用于 datepicker 输入。否则,文本框或其他输入将生成有关无效日期的错误消息。规则应该看起来像

$("#modForm").kendoValidator(
    rules: 
        dateValidation: function (input) 
            if (input.is('[data-role="datepicker"]')) 
                var value = $(input).val();

                var date = kendo.parseDate(value);
                if (!date) 
                    return false;
                
            
            return true;
        
    ,
    messages: 
        dateValidation: "You must enter a date",
    
);

【讨论】:

以上是关于你如何让剑道日期选择器对最短日期进行日期验证?的主要内容,如果未能解决你的问题,请参考以下文章

剑道日期选择器选择日期应该从年份开始

剑道日期输入字段需要在日期部分选择

剑道日期选择器随机不显示日历以更改日期

从客户端设置剑道日期选择器的最大日期

单击复选框时禁用剑道日期选择器

使用日期时间选择器进行日期和时间验证 (ASP.Net MVC Core v1.1)