【问题标题】:DatePicker JQuery UI valiadtion to date >= from dateDatePicker JQuery UI 验证到日期 >= 从日期
【发布时间】:2017-02-16 18:17:10
【问题描述】:

谁能告诉我如何通过类名进行验证(即).datepicker

这里是验证 to date >= from date

的演示
$('.datepicker').datepicker({
changeYear: true,
dateFormat: "dd-mm-yy", 
yearRange: '2006:' + (new Date().getFullYear() +1)
}).datepicker("setDate", "0");

http://jsfiddle.net/sharmilashree/YdeY8/482/

【问题讨论】:

    标签: javascript jquery jquery-ui razor jquerydatetimepicker


    【解决方案1】:

    我同意使用moment.js。但是,如果您出于某种原因不想或不能这样做,这里有一个适合您的解决方案。

    http://jsfiddle.net/jonofan/YdeY8/483/

    $('.datepicker').on('change', function() {
          var fromParts = $('#CheckInDate').val().split('-');       
          var toParts = $('#CheckOutDate').val().split('-');
    
          //please put attention to the month (parts[0]), Javascript counts months from 0:
          // January - 0, February - 1, etc
    
          var fromDate = new Date(fromParts[2],fromParts[0]-1,fromParts[1]); 
          var toDate = new Date(toParts[2],toParts[0]-1,toParts[1]); 
    
          if ( fromDate >= toDate ) {
            alert('Check in must be before check out!')
          }
        })
    

    您必须将日期拆分为多个部分的原因是 javascript Date() 对象仅解析特定格式,您不能自定义格式。这就是为什么使用像moment.js 这样的库很好的原因,因为它可以非常灵活地处理所有事情。

    根据经验,如果您想更改日期格式,使用字符串拆分来解析日期会出现问题。假设在 6 个月后您想将日期从 dd-mm-yy 更改为 dd/mm/yy;您将不得不去更新您的字符串拆分代码。

    【讨论】:

    • 感谢您的回复。有没有办法将 checkInDate.datepicker 和 checkOutDate.datepicker 函数放入 .datepicker 函数中。因为我需要通过类名而不是控件名来访问控制字段。
    • @Ammu 您当然可以通过$('.datepicker') 访问它们,但您需要知道哪些是签入,哪些是签出。为此,我认为您可能仍然需要这些 ID。如果这很有用,您是否可以“标记为答案”。
    【解决方案2】:

    您可以使用momentJS 来验证您的日期是否早于或等于。
    一个简单的代码:

    if(moment(fistDate).isBefore(moment(secondDate)) || moment(firstDate).isSame(moment(secondDate)) {
    
    }
    

    在此示例中,第一个日期表示您的 datetimepicker 的值,第二个日期是您想要的任何日期,因为您从未告诉过它是什么。

    【讨论】:

    • 感谢您的回复。我的编码工作正常。有什么方法可以将 checkInDate.datepicker 和 checkOutDate.datepicker 函数放入 .datepicker 函数中。因为我需要通过类名而不是控件名来访问控制字段。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-23
    • 1970-01-01
    • 2011-02-12
    相关资源
    最近更新 更多