Question

我正在尝试使用以下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'),

日期显示正确，但随后下拉停止为我工作！

有谁可以建议我哪里出错了？我已经做了大量的游戏，谷歌搜索等，但我仍然无法弄明白:(

BTW：当我不尝试编辑日期格式时，下拉列表本身就有效：

Answer 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'
});

日期正确，格式也正确。

希望这有助于其他人！

Bootstrap 3 Datepicker + Moment.js，似乎无法使格式工作

1 个答案: