CODEWITHSUNDEEP
eonasdan-datetimepicker
hameeda naz
hameeda naz

Reputation: 287

Change the day names in title to single letter in bootstrap datetimepicker

I am using bootstrap datetime picker (http://eonasdan.github.io/bootstrap-datetimepicker/) and I want to change the header of the week to a single letter like below:

S M T W T F S

Image example

Does anyone know any property to do that?

Upvotes: 0

Views: 3066

Answers (1)

VincenzoC
VincenzoC

Reputation: 31482

Bootstrap eonasdan-datetimepicker relies on momentjs and it uses moment to get the localized names of the days of the week (see fillDow function in the source: it uses currentDate.format('dd') to get short name of the day of the week via moment format).

Moment lets you customize localized short names using updateLocale and the weekdaysMin key as explained in the Customize -> Minimal Weekday Abbreviations section of the docs.

Here a complete working sample:

moment.updateLocale('en', {
  weekdaysMin : ["S", "M", "T", "W", "T", "F", "S"]
});
$('#datetimepicker1').datetimepicker();
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
    <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

Upvotes: 2

Related Questions