当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap 3 datepicker - minDate和maxDate

如何解决《Bootstrap3datepicker-minDate和maxDate》经验,为你挑选了2个好方法。

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

你好

我试图使用最小最大日期选项,但不知道如何使用它,因为文档不提供示例代码.

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

minDate:时刻()

但是这会引发一个错误,即没有定义时刻.

我猜它找不到包含在页面上的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] || {}));



1> Kam Miah..:

回答我的问题.使用的框架要求您在配置文件中添加时刻,否则它将不允许使用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',
});

这将禁用您输入的日期之前和之后的所有日子().

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

$datepickerInput.val(moment());



2> 小智..:
var todayDate = new Date().getDate();

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

通过使用此示例,您可以选择用户在不使用momentjs的情况下选择今天和接下来30天之间的日期.您可以根据自己的需要提供minDate和maxDate的值.例如,如果您想在过去30天到下一个30天之间提供选项,那么请设置

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

推荐阅读
手机用户2402852387
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有