Question

问题是我有两个日期选择器叫做leave_start另一个leave_end。我有一些自定义的事情来阻止周末，并设置今天的minDate，并阻止自定义假期。我似乎无法弄清楚为什么我无法从第一个日期选择器（leave_start）中获取val日期并在第二个datepicker（leave_end）中将其设置为minDate。其他一切都很好，只是似乎无法让这个工作。任何帮助将不胜感激！

侧面注意这是rails应用程序上的ruby 使用jquery datepicker。

这是我的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

试图让日期选择器与第二个日期选择器

2 个答案: