Bootstrap 3日期选择器-minDate和maxDate

Bootstrap 3 datepicker - minDate and maxDate

本文关键字：maxDate -minDate 选择器 日期 Bootstrap      更新时间：2023-09-26

http://eonasdan.github.io/bootstrap-datetimepicker/

嗨

我正在尝试使用最小-最大日期选项，但不确定如何使用它，因为文档中没有提供示例代码。

我在stackoverflow上发现你可以这样做：

最小日期：moment（）

但这引发了一个错误，即时刻尚未定义。

我猜它找不到页面上包含的moment.js，否则插件就无法工作。

我试图实现的是在当天之前禁用10天，并显示当天之后的30天。

感谢

Here is the code (I have removed everything except whats important to simply show the code):
window[ns] = window[ns] || {};
(function ($, moment, app) {
    'use strict';
    // Private Methods
    var nameSpace = 'global',
        globalDataObject = null,
       
        notifyRenderCallbacks = function (pageName) {
            if ($('.js-calendar').length) {
                $('.js-calendar').datetimepicker({
                    format: 'DD MMMM YYYY',
                    dayViewHeaderFormat: 'MMMM YYYY',
                    icons: {
                        next: 'icon icon-chevronright',
                        previous: 'icon icon-chevronleft'
                    },
                    enabledDates: moment().add(30, 'days')
                });
            }
        },
    // If this module requires global data
    app.register(nameSpace, initialize);
}(jQuery, moment, window[ns] || {}));

回答我的问题。使用的框架要求您在配置文件中添加moment，否则它将不允许使用http://momentjs.com/或者任何其他JS——与建立框架的人交谈，他们这样做是出于安全原因。

Kasun的答案是正确的，但更好的方法是使用Moment.js，因为datetimepicker使用的是这个js。

因此，要回答第二部分，即禁用当前日期前10天并显示当前日期后30天，您需要设置以下选项。我不需要做之前的10天，但只希望有一定的天数可供选择。我添加了一些注释以使事情变得清楚，但它们不应该在那里。

$mydatepicker.datetimepicker({
    minDate: moment(), // Current day
    maxDate: moment().add(30, 'days'), // 30 days from the current day
    viewMode: 'days',
    format: 'DD MMMM YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
});

上述操作将启用minDate和maxDate之间的所有日期。

您也可以直接输入日期范围：

$mydatepicker.datetimepicker({
    minDate: moment("12/01/2015"),
    maxDate: moment("12/30/2015"),
    viewMode: 'days',
    format: 'DD MMMM YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
});

这将禁用您在moment（）中输入的日期之前和之后的所有日子。

这不是问题的一部分，但我想在加载日历时在输入值中显示当前日期，但它不会，而是显示占位符文本。我认为这是因为使用了if-minDate，所以我只是使用jQuery来替换输入的值。

$datepickerInput.val(moment());

var todayDate = new Date().getDate();
$('#element').datetimepicker({
  timepicker:false,
  formatDate:'Y/m/d',
  minDate: new Date(),
  maxDate: new Date(new Date().setDate(todayDate + 30))
});

通过使用这个例子，您可以让用户选择从今天到下一个30天之间的日期，而无需使用momentjs。您可以根据需要提供minDate和maxDate的值。举个例子，如果你想在过去30天到未来30天之间提供选项，那么设置

minDate: new Date(new Date().setDate(todayDate - 30))
maxDate: new Date(new Date().setDate(todayDate + 30))

只需这样做，使用JavaScript日期对象：

minDate: (new Date()).getDate()

禁用

$("#editreservation_to").datetimepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');

启用

$("#editreservation_to").datetimepicker({minDate:false,maxDate:false}).removeAttr('readonly');
相关文章：