Question

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

在这种情况下，当在一个datetimepicker中选择日期时，它应该将所选日期设置为其他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，我找到的最简单的方法是：

const std::wstring letters = L"ABCDE...";
const size_t letters_count = letters.length(); // or use a macro

// random letter
size_t r = rand() % letters_count;
wchar_t random_letter = letters[r];

这将禁用比今天更大的日期。

Answer 2

我假设您使用了代码段中提供的代码中的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",
    });

如何在bootstrap中设置datetimepicker的MinDate和maxDate属性

5 个答案: