Bootstrap 3 datepicker - minDate和maxDate [英] Bootstrap 3 datepicker - minDate and maxDate

问题描述

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

您好

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

I am trying to use the min max date options but not sure how to use it as the documentation doesn't provide example code.

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

I found on stackoverflow that you can do this:

minDate：moment（）

minDate: moment()

但是这会引发一个错误，那个时刻没有定义。

But that throws an error that moment is not defined.

我猜它找不到包含在页面上的moment.js，否则插件将无效。

I am guessing it can't find the moment.js which is included on the page otherwise the plugin wouldn't work.

我想要达到的目的是在当天前10天禁用并显示30从当天起的几天。

What I am trying to achieve is to disable 10 days before the current day and show 30 days from the current day.

谢谢

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] || {}));

推荐答案

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

To answer my question. The framework used required you to add moment to a config file otherwise it would not allow to use http://momentjs.com/ or any other JS - spoke to the person who set up the framework and they did it for security reasons.

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

Kasun's answer is correct but a better way to do this is to use Moment.js since datetimepicker is using this JS.

所以回答第二部分，即在当前日期前10天禁用并显示当前30天那天你需要设置如下选项。我不需要在10天前完成，但只想要一定天数可供选择。我已经添加了评论以使事情清楚，但它们不应该存在。

So to answer the 2nd part which is to disable 10 days before the current day and show 30 days from the current day you need to set the options as below. I didn't need to do the 10 days before but wanted only a set number of days to be available to select. I've added comments to make things clear but they shouldn't be there.

$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之间的所有日期。

What the above will do is enable all the days between minDate and maxDate.

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

You could also directly enter the date range:

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

这将禁用你输入的日期之前和之后的所有日子（）。

And this will disable all days before and after the dates you entered into moment().

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

This is not part of the question but I wanted to display the current day in the input value when the calendar loaded but it wouldn't, instead it would show the placeholder text. I think its because of the use if minDate so I simply used jQuery to replace the value of the input.

$datepickerInput.val(moment());

这篇关于Bootstrap 3 datepicker - minDate和maxDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！