CODEWITHSUNDEEP
twitter-bootstrap-3momentjsbootstrap-datepicker
Andrew Newby
Andrew Newby

Reputation: 5197

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

enter image description here

If I change it to:

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

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

enter image description here

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:

enter image description here

Upvotes: 2

Views: 18253

Answers (1)

Andrew Newby
Andrew Newby

Reputation: 5197

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!

Upvotes: 2

Related Questions