Bootstrap datetimepicker Date/time picker widget for Twitter Bootstrap v3



Minimum Setup

Code

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <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>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

Example 2

Using Locales. This is same as EX 1: Minimum Setup but using the "ru" language option. Note that the language file must be included from the locales folder

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    language: 'ru'
                });
            });
        </script>
    </div>
</div>
            

Example 3

Available functions. Note that hide is also available.


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <button id="setMinDate">setMinDate</button>
            <button id="setMaxDate">setMaxDate</button>
            <button id="show">show</button>
            <button id="disable">disable</button>
            <button id="enable">enable</button>
            <button id="setDate">setDate</button>
            <button id="getDate">getDate</button>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    pick12HourFormat: false
                });
                $("#setMinDate").click(function () {
                    $('#datetimepicker3').data("DateTimePicker").setMinDate(new Date("june 12, 2013"));
                });                                
                $("#setMaxDate").click(function () {
                    $('#datetimepicker3').data("DateTimePicker").setMaxDate(new Date("july 4, 2013"));
                });
                $("#show").click(function () {
                    $('#datetimepicker3').data("DateTimePicker").show();
                });
                $("#disable").click(function () {
                    $('#datetimepicker3').data("DateTimePicker").disable();
                });
                $("#enable").click(function () {
                    $('#datetimepicker3').data("DateTimePicker").enable();
                });
                $("#setDate").click(function () {
                    $('#datetimepicker3').data("DateTimePicker").setDate("10/23/2013");
                });
                $("#getDate").click(function () {
                    alert($('#datetimepicker3').data("DateTimePicker").getDate());
                });
            });
        </script>
    </div>
</div>

Example 4

Disable the date picker

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker4'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({
                    pickDate: false
                });
            });
        </script>
    </div>
</div>
            

Example 5

Disable the time picker and use a custom date format data-date-format="YYYY/MM/DD". (US default is MM/DD/YYYY hh:mm A/PM)

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    pickTime: false
                });
            });
        </script>
    </div>
</div>

Example 6

Usage without an icon.


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <input type='text' class="form-control" id='datetimepicker6'/>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker6').datetimepicker();
            });
        </script>
    </div>
</div>

Example 7

Using with another input-group-addon element


                        <div class="container">
                            <div class="row">
                                <div class='col-sm-6'>
                                    <input type='text' class="form-control" id='datetimepicker7'/>
                                    <span class="input-group-addon datepickerbutton">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                                </div>
                                <script type="text/javascript">
                                    $(function () {
                                        $('#datetimepicker7').datetimepicker();
                                    });
                                </script>
                            </div>
                        </div>
                    

Example 8

En/Disabled Dates. Both are mutually exclusive and expect an array. Disabled dates might be used for holidays. Enabled dates might be used for available dates for a reservation.

<div class="container">
    <div class="row">
       <div class='col-sm-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>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker7').datetimepicker({
                    defaultDate: "11/1/13",
                    disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ]
                });
            });
        </script>
    </div>
</div>

Example 9

Events and linked pickers

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker8'>
                    <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-5'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker9'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker8').datetimepicker();
            $('#datetimepicker9').datetimepicker();
            $("#datetimepicker8").on("dp.change",function (e) {
               $('#datetimepicker9').data("DateTimePicker").setMinDate(e.date);
            });
            $("#datetimepicker9").on("dp.change",function (e) {
               $('#datetimepicker8').data("DateTimePicker").setMaxDate(e.date);
            });
        });
    </script>
</div>

Example 10

Custom Icons (e.g. Font Awesome)

<div class="container">
    <div class="col-sm-6" style="height:130px;">
        <div class="form-group">
            <div class='input-group date' id='datetimepicker10'>
                <input type='text' class="form-control" />
                <span class="input-group-addon"><span class="fa fa-calendar">
                      </span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker10').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
        });
    </script>
</div>

Options

These options can also be set by data-date-OPTION

$.fn.datetimepicker.defaults = {
    pickDate: true,                 //en/disables the date picker
    pickTime: true,                 //en/disables the time picker
    useMinutes: true,               //en/disables the minutes picker
    useSeconds: true,               //en/disables the seconds picker
    useCurrent: true,               //when true, picker will set the value to the current date/time     
    minuteStepping:1,               //set the minute stepping
    minDate:`1/1/1900`,               //set a minimum date
    maxDate: ,     //set a maximum date (defaults to today +100 years)
    showToday: true,                 //shows the today indicator
    language:'en',                  //sets language locale
    defaultDate:"",                 //sets a default date, accepts js dates, strings and moment objects
    disabledDates:[],               //an array of dates that cannot be selected
    enabledDates:[],                //an array of dates that can be selected
    icons = {
        time: 'glyphicon glyphicon-time',
        date: 'glyphicon glyphicon-calendar',
        up:   'glyphicon glyphicon-chevron-up',
        down: 'glyphicon glyphicon-chevron-down'
    }
    useStrict: false,               //use "strict" when validating dates  
    sideBySide: false,              //show the date and time picker side by side
    daysOfWeekDisabled:[]          //for example use daysOfWeekDisabled: [0,6] to disable weekends 
};

Events

dp.change

Fires when the datepicker changes or updates the date. Note that change may also fire for knockout support.

dp.show

Fires when the widget is shown

dp.hide

Fires when the widget is hidden

dp.error

Fires when Moment cannot parse the date or when the timepicker cannot change because of a `disabledDates` setting. Returns a Moment date object. The specific error can be found be using invalidAt(). For more information see Moment's docs