【发布时间】:2017-01-07 14:39:03
【问题描述】:
我正在尝试让以下 Bootstrap 3 插件工作:
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
其中一个要求是 Moment.js:
http://momentjs.com/docs/#/customization/
我的 HTML 是:
<div class="container">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
JS:
<script type="text/javascript" src="/clip-art/static/datepicker/moment.js"></script>
<script type="text/javascript" src="/clip-art/static/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap.min.css" />
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap-datetimepicker.min.css" />
$(function () {
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
//format: moment().format('YYYY-MM-DD'),
format: moment().format('LLLL'),
locale: "en"
});
$('#datetimepicker7').datetimepicker({
useCurrent: false, //Important! See issue #1075
allowInputToggle: true,
enabledHours : false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
我有点困惑,因为我似乎无法让格式正常工作。如果我用它来设置格式:
format: moment().format('LLLL'),
我遇到了一个非常奇怪的约会! (甚至不确定那是什么语言??)
如果我将其更改为:
format: moment().format('YYYY-MM-DD'),
日期显示正确,但下拉菜单对我不起作用!
谁能建议我哪里出错了?我已经玩了很多,谷歌搜索等,但我仍然无法弄清楚:(
顺便说一句:当我不尝试编辑日期格式时,下拉菜单本身会起作用:
【问题讨论】:
-
你导入 Jquery 吧??
-
@LeonelAtencio - 是的,对不起,我忘了包含它(它在我的代码中更进一步)。脚本本身运行 - 它只是我无法弄清楚的日期格式:)
标签: twitter-bootstrap-3 momentjs bootstrap-datepicker