如何在引导程序中设置 datetimepicker 的 MinDate 和 maxDate 属性

Question

我想在 bootstrap 中为 datetimepicker 动态设置 minDate 和 maxDate 属性，请帮助我。

在这种情况下，当在一个 datetimepicker 中选择日期时，它应该将所选日期设置为 minDate 用于其他 datetimepicker。

在第二个日期时间选择器中选择日期后，其选择的日期应该成为第一个日期时间选择器中的maxDate。

我试过这样：

$(document).ready(function(){
      $(".form_datepicker_startdate").datetimepicker({         
       isRTL: App.isRTL(),
                format: "yyyy-mm-dd",
                weekStart: 1,
                todayBtn:  1,
          autoclose: 1,
          todayHighlight: 1,
          startView: 2,
          minView: 2,
          startDate:'<%= request.getSession().getAttribute("startdate") %>',
          endDate:'<%= request.getSession().getAttribute("enddate") %>',
          forceParse: 0,
                pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left")          
           }).on('changeDate', function (selected) {
                var minDate = new Date(selected.date.valueOf());
                $('.form_datepicker_enddate').datepicker('setMinDate', minDate);
            });


$(".form_datepicker_enddate").datetimepicker({         
       isRTL: App.isRTL(),
                format: "yyyy-mm-dd",
                weekStart: 1,
                todayBtn:  1,
          autoclose: 1,
          todayHighlight: 1,
          startView: 2,
          minView: 2,
          startDate:'<%= request.getSession().getAttribute("startdate") %>',
          endDate:'<%= request.getSession().getAttribute("enddate") %>',
          forceParse: 0,
                pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left")          
           }).on('changeDate', function (selected) {
                var maxDate = new Date(selected.date.valueOf());
                $('.form_datepicker_startdate').datepicker('setMaxDate', maxDate);
            });
     });

Answer 1

为了限制Botstrap datepicker，我找到的最简单的方法是：

$("#datepicker").datepicker({

  maxDate : 'now'

});

这将禁用大于今天的日期。

Answer 2

我假设您使用的是您在代码 sn-p 中给出的代码中的this plugin。假设这是您尝试在应用程序中使用的插件，那么您更新开始和结束日期的方法是错误的，或者可能会混淆来自不同库的内容。

无论如何，如果我正确理解了您的问题，这里是 jsfiddle，它完成了您的一部分功能。

更新新的开始或结束日期时，要使用的语法如下（来自插件的文档）：

$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

开始和结束日期的名称选项是 setStartDate 和 setEndDate 不是 minDate 和 MaxDate 用于更新它们的函数是 datetimepicker 而不是 datepicker。

这是来自 JS Fiddle 的代码：

$(document).ready(function(){
  $("#form_datepicker_startdate").datetimepicker({
    format: "yyyy-mm-dd",
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    startDate : new Date('2012-08-08'),
    endDate : new Date('2014-08-08'),
}).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#form_datepicker_enddate').datetimepicker('setStartDate', minDate);
});

  $("#form_datepicker_enddate").datetimepicker();
 });

希望对您有所帮助，如果我在任何地方的假设有误，请告诉我。

Answer 3

我正在使用以下 Datetimepicker Site URL 请找到以下代码以停止将来的日期选择。

$(".datepicker").datetimepicker({
        format: 'd/m/Y H:i',
        formatTime: 'H:i',           
        formatDate: 'd/m/Y',
        step: 15,
        maxDate: new Date(),
        onGenerate: function () {
            var leftPos = $(this).offset().left + 70 + 'px';
          $('.xdsoft_datetimepicker').css({ 'left': leftPos});
       }
    });

Answer 4

这些应该可以解决问题。

$(".form_datepicker_startdate").datetimepicker().on("dp.change", function (e) {
    $(".form_datepicker_enddate").data("DateTimePicker").minDate(e.date);
});

$(".form_datepicker_enddate").datetimepicker().on("dp.change", function (e) {
    $(".form_datepicker_startdate").data("DateTimePicker").maxDate(formattedDate);
});

Answer 5

我使用 Jquery UI。很简单，这里是你可以在 JQuery UI 上使用的代码

    $("#datepicker").datepicker({
      minDate : +30,
      maxDate : +90,
      dateFormat : "yy-mm-dd",
    });