Bootstrap DateTimePicker 在输入没有值时选择 maxDate 时出现问题
Bootstrap DateTimePicker issue selecting maxDate when input has no value
使用 Bootstrap 3 Datetimepicker v4 http://eonasdan.github.io/bootstrap-datetimepicker/ 以及 Moment 2.9 和其他所需文件。
我需要在用户 select 使用选择器设置日期时触发更改事件,无论输入字段的值如何。对我来说,为输入设置一个空值而不是使用具有最大允许值的占位符是有意义的。
<div class="row">
<div class="col-sm-6"><div class="form-group">
<div class="input-group date" id="dayjump">
<input type="text" class="form-control" value="" placeholder="24" name="dayportal" id="dayportal" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div></div>
</div>
我似乎遇到的问题是当输入没有值时无法 select 编辑 maxDate。占位符的存在似乎对问题没有影响。
$("#dayjump").datetimepicker({
useCurrent: false,
format: "D",
minDate: moment("2/7/2015","M/D/YYYY"),
maxDate: moment("02/24/2015","M/D/YYYY"),
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
previous: "fa fa-angle-left",
next: "fa fa-angle-right",
today: "fa fa-thumb-tack",
clear: "fa fa-trash"
}
});
$("#dayjump").on("dp.change",function (e) {
var y = moment(e.date).format("YYYY");
_m = moment(e.date).format("M");
_d = moment(e.date).format("D");
alert("year=" + y + " month=" + _m + " date=" + _d);
});
请参阅 fiddle 此处 https://jsfiddle.net/spasticdonkey/waoLzwz5/1/
您会注意到示例中除 maxDate 之外的所有日期都可以 selected,并且尝试 select maxDate 也不会更新输入字段。
我认为,这是错误。我在控制台中收到警告:
弃用警告:moment 构造回退到 js 日期。这是不鼓励的,将在即将发布的主要版本中删除。详情请参考https://github.com/moment/moment/issues/1407。
你可以用拐杖来解决这个问题:
maxDate: moment("02/25/2015","M/D/YYYY"),
disabledDates: [
"02/25/2015"
],
设置日期+1并禁用它。
这对我有用:
maxDate: moment("02/24/2015 23:59:59","MM/DD/YYYY HH:mm:ss")
我们不需要像接受的答案那样明确提及和禁用日期
maxDate: moment("02/25/2015","M/D/YYYY")
disabledDates: [ "02/25/2015" ]
我觉得这个比较好 fix.Please 找到js fiddle: jsfiddle.net/AbhinayKumarGunna/6jx723ep/57
我解决这个问题的方法是设置 maxDate
如下:
maxDate: new Date().setHours(23,59,59,999)
如果您仅将 maxDate 设置为 new Date()
,那么它将不允许选择今天的日期,因为在页面呈现时已经过了可选择的最大日期。
使用 Bootstrap 3 Datetimepicker v4 http://eonasdan.github.io/bootstrap-datetimepicker/ 以及 Moment 2.9 和其他所需文件。
我需要在用户 select 使用选择器设置日期时触发更改事件,无论输入字段的值如何。对我来说,为输入设置一个空值而不是使用具有最大允许值的占位符是有意义的。
<div class="row">
<div class="col-sm-6"><div class="form-group">
<div class="input-group date" id="dayjump">
<input type="text" class="form-control" value="" placeholder="24" name="dayportal" id="dayportal" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div></div>
</div>
我似乎遇到的问题是当输入没有值时无法 select 编辑 maxDate。占位符的存在似乎对问题没有影响。
$("#dayjump").datetimepicker({
useCurrent: false,
format: "D",
minDate: moment("2/7/2015","M/D/YYYY"),
maxDate: moment("02/24/2015","M/D/YYYY"),
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
previous: "fa fa-angle-left",
next: "fa fa-angle-right",
today: "fa fa-thumb-tack",
clear: "fa fa-trash"
}
});
$("#dayjump").on("dp.change",function (e) {
var y = moment(e.date).format("YYYY");
_m = moment(e.date).format("M");
_d = moment(e.date).format("D");
alert("year=" + y + " month=" + _m + " date=" + _d);
});
请参阅 fiddle 此处 https://jsfiddle.net/spasticdonkey/waoLzwz5/1/
您会注意到示例中除 maxDate 之外的所有日期都可以 selected,并且尝试 select maxDate 也不会更新输入字段。
我认为,这是错误。我在控制台中收到警告:
弃用警告:moment 构造回退到 js 日期。这是不鼓励的,将在即将发布的主要版本中删除。详情请参考https://github.com/moment/moment/issues/1407。
你可以用拐杖来解决这个问题:
maxDate: moment("02/25/2015","M/D/YYYY"),
disabledDates: [
"02/25/2015"
],
设置日期+1并禁用它。
这对我有用:
maxDate: moment("02/24/2015 23:59:59","MM/DD/YYYY HH:mm:ss")
我们不需要像接受的答案那样明确提及和禁用日期
maxDate: moment("02/25/2015","M/D/YYYY")
disabledDates: [ "02/25/2015" ]
我觉得这个比较好 fix.Please 找到js fiddle: jsfiddle.net/AbhinayKumarGunna/6jx723ep/57
我解决这个问题的方法是设置 maxDate
如下:
maxDate: new Date().setHours(23,59,59,999)
如果您仅将 maxDate 设置为 new Date()
,那么它将不允许选择今天的日期,因为在页面呈现时已经过了可选择的最大日期。