如何验证jQuery UI日期选择器“从日期”到“到日期”

时间:2016-08-12 10:41:20

标签: javascript jquery jquery-ui jquery-ui-datepicker

我有两个字段“从日期”和“到目前为止”。我是jQuery的新手,我正在学习它。

  1. 从jQuery UI日期选择器上的日期中选择时,以前都是 日期(在当前日期之前)是不可选择的(灰色)。
  2. 选择日期时,仅显示从当前日期开始的日期
    • 可选择1天(无法从日期或日期选择相同日期)
  3. 我目前正在使用此代码:

    $( function() {
    var dateFormat = "dd-mm-yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
    
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
    
      return date;
    }
    });
    

    注意:日期格式应为“ dd-mm-yy

1 个答案:

答案 0 :(得分:1)

要使当前日期之前的日期变灰,只需在datepicker配置中将minDate设置为当前日期。

minDate: new Date()

您还应该将dateFormat选项显式设置为与$ .datepicker.parseDate调用中使用的选项相同。

如果我理解你的问题,这个小提琴应该是正确的(稍微修改你的代码)

http://jsfiddle.net/8w8v9/1846/