Bootstrap DateTimePicker (eonasdan) format date as DD/MMM/YYYY

Question

I'm having quite of a problem regarding this bootstrap plugin below.

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

I have an initial value of "15/05/1992" which has an initial format of "DD/MM/YYYY", now using this plugin which also use moments as its base. I want to format it like this "15/May/1992" but Every time I format it using 'DD/MMM/YYYY' it is not working as it should be. It is showing as "15/Jan/1992" which is wrong because the month should be May.

I also test another date like "19/02/2198" applying the same steps above and it is showing as "19/Jan/2002" which very very wrong. I don't know if it has something to do with moments.js but I'm really stuck on this right now.

Any help will be much appreciated! Thanks!

HTML

<div class="row">
    <div class="col-md-12">
         <h6>datetimepicker1</h6>
        <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control" value="15/05/1992" />   <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
    </div>
</div>

Script.

$('#datetimepicker1').datetimepicker({format : "DD/MMM/YYYY"});   

See Sample http://jsfiddle.net/byx1couq/2/

Answer 1

Don't try to set the value attribute directly. Doing so will always use the locale format of the browser, so you can't really control it.

Instead, use the date function from the date picker control (see docs here). Since it can accept a moment object, that is your best bet for fine control over the input format.

$('#datetimepicker1').data("DateTimePicker").date(moment("15/05/1992","DD/MM/YYYY"));

Updated fiddle here.