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