坚持尝试让日期选择器与第二个日期选择器的设定日期一起玩

Question

问题是我有两个日期选择器，一个叫 leave_start，另一个叫 leave_end。我有一些自定义的事情要阻止周末并将 minDate 设置为今天并阻止自定义假期。然而，我似乎无法弄清楚为什么我无法从第一个日期选择器 (leave_start) 中获取验证日期并将其设置为第二个日期选择器 (leave_end) 中的 minDate。其他一切都很好，只是似乎无法让它发挥作用。任何帮助将不胜感激！

旁注这是 ruby 在 rails 上的应用使用 jquery 日期选择器。

这是我的 Application.js

$(document).ready(function() {


    var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
    var start = $("#leave_start").val();

    $('#leave_start').datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        minDate: 0,
        beforeShowDay: function(date) {
            var weekend = $.datepicker.noWeekends(date);
            if (weekend[0]) {
                var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [penn.indexOf(holidays) == -1];
            } else {
                return weekend;
            } 
        }
     });
     $('#leave_end').datepicker({
         beforeShowDay: $.datepicker.noWeekends,
         minDate: start,
         beforeShowDay: function(date) {
             var weekend = $.datepicker.noWeekends(date);

             if (weekend[0]) {
                 var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
                 return [penn.indexOf(holidays) == -1];

             } else {
                 return weekend;
             }
          }
      });
}):

Answer 1

您可以在第一个 datepicker 上设置更改事件处理程序来更新第二个 minDate。

简单示例：

$('#date1').datepicker();
$('#date2').datepicker();

$('#date1').change(function() {
    $( "#date2" ).datepicker( "option", "minDate", $('#date1').val() );
});

查看工作演示：http://jsfiddle.net/ddan/jon3xt3e/1/

编辑

使用您的设置和 javascript 的示例：

$(document).ready(function() {
    var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
    var start = $("#leave_start").val();

    $('#leave_start').datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        minDate: 0,
        beforeShowDay: function(date) {
            var weekend = $.datepicker.noWeekends(date);
            if (weekend[0]) {
                var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [penn.indexOf(holidays) == -1];
            } else {
                return weekend;
            } 
        }
     });
     $('#leave_end').datepicker({
         beforeShowDay: $.datepicker.noWeekends,
         minDate: start,
         beforeShowDay: function(date) {
             var weekend = $.datepicker.noWeekends(date);

             if (weekend[0]) {
                 var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
                 return [penn.indexOf(holidays) == -1];

             } else {
                 return weekend;
             }
          }
      });

     $('#leave_start').change(function() {
        $( "#leave_end" ).datepicker( "option", "minDate", $('#leave_start').val() );
     });
});

工作示例：http://jsfiddle.net/ddan/jon3xt3e/2/

Answer 2

使用第一个的onSelect方法来改变第二个的选项。您当前的尝试只会在页面加载时获取输入值，因此它需要绑定到事件以进行更改以及使用 API 更改选项

function beforeShow(date) {
  var weekend = $.datepicker.noWeekends(date);
  if (weekend[0]) {
    var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [penn.indexOf(holidays) == -1];
  } else {
    return weekend;
  }
}
$(function() {

  var start = $("#leave_start").val();

  $('#leave_start').datepicker({        
    dateFormat: "yy-mm-dd",
    onSelect: function(date, ui) {
      $leave.datepicker('option', {'minDate': date});
    },
    beforeShowDay: beforeShow
  });

  var $leave = $('#leave_end').datepicker({
    minDate: start,
    dateFormat: "yy-mm-dd",
    onSelect: function(d, ui) {
      //do something when leave selected
    },
    beforeShowDay: beforeShow
  });

});

另请注意，您的插件定义对象中有两次 beforeShowDay 属性

DEMO

坚持尝试让日期选择器与第二个日期选择器的设定日期一起玩

Stuck trying to get datepicker to play nice with a set date for second date picker

javascript

jquery

ruby-on-rails

datepicker