Bootstrap 3 Datepicker + Moment.js , can't seem to get format to work

问题

I'm trying to get the following Bootstrap 3 plugin to work:

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

One of the requirement is Moment.js:

http://momentjs.com/docs/#/customization/

My HTML is:

<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>

The 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>

I'm a bit confused, as I can't seem to get the format to work. If I use this to set the format:

format: moment().format('LLLL'),

I get a REALLY weird date! (not even sure what language that is??)

If I change it to:

format: moment().format('YYYY-MM-DD'),

The date DOES show correctly, but then the dropdown stops working for me!

Can anyone suggest where I'm going wrong? I've done loads of playing around, googling etc, but I still can't figure it out :(

BTW: The dropdown itself works when I don't try and edit the format of the date:

回答1:

Ok, well I'm not sure why it didn't like taking a moment().format() value, but after checking the GitHub issues, I came across an issue with the format. It led me to this example:

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

So after tweaking my code to use format: 'YYYY-MM-DD' instead, and this seems to have sorted it:

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

The date is correct, as well as the format.

Hopefully this helps someone else!

来源：https://stackoverflow.com/questions/41522587/bootstrap-3-datepicker-moment-js-cant-seem-to-get-format-to-work

标签

twitter-bootstrap-3

momentjs

bootstrap-datepicker