【问题标题】:Bootstrap 3 Datepicker + Moment.js , can't seem to get format to workBootstrap 3 Datepicker + Moment.js ,似乎无法使格式正常工作
【发布时间】: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


【解决方案1】:

好吧,我不知道为什么它不喜欢使用 moment().format() 值,但是在检查 GitHub 问题后,我遇到了格式问题。这让我想到了这个例子:

https://jsfiddle.net/dugujianxiao/ad64awL7/11/

所以在调整我的代码以改用 format: 'YYYY-MM-DD' 之后,这似乎已经对其进行了排序:

$('#datetimepicker6').datetimepicker( {
    maxDate: moment(),
    allowInputToggle: true,
    enabledHours : false,
    locale: moment().local('en'),
    format: 'YYYY-MM-DD'
});

日期正确,格式也正确。

希望这对其他人有帮助!

【讨论】:

  • 可能您已经解决了问题,但请注意您可以使用LLLL 格式的选择器。由于format 选项接受字符串,您只需设置format: 'LLLL 而不是format: moment().format('LLLL')
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-08-11
  • 1970-01-01
  • 2017-09-04
  • 2012-05-06
  • 2013-02-17
  • 2017-10-09
  • 2017-08-03
相关资源
最近更新 更多