javascript - 试图让日期选择器与第二个日期选择器的设定日期很好地配合

Question

问题是我有两个日期选择器，分别称为leave_start 和leave_end。我正在进行一些自定义操作，以排除周末并将 minDate 设置为今天，并排除自定义假期。然而，我似乎无法弄清楚为什么我无法从第一个日期选择器(leave_start)中获取val日期并将其设置为第二个日期选择器(leave_end)中的minDate。其他一切都很好，只是似乎无法让它发挥作用。任何帮助将不胜感激!

旁注这是一个 ruby​​ on 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/