jQuery Bootstrap Date/Time Picker

Shares

Date/time picker widget based on twitter bootstrap.

Minimal Requirements

  • jQuery
  • Moment.js
  • Bootstrap.js (transition and collapse are required if you’re not using the full Bootstrap)
  • Bootstrap Datepicker script
  • Bootstrap CSS
  • Bootstrap Datepicker CSS
  • Locales: Moment’s locale files are here

bower
Bower version
Run the following command:

bower install eonasdan-bootstrap-datetimepicker#latest --save

Include necessary scripts and styles:

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

Nuget
LESS: NuGet version

PM> Install-Package Bootstrap.v3.Datetimepicker

CSS: NuGet version

PM> Install-Package Bootstrap.v3.Datetimepicker.CSS
<head>
  <script type="text/javascript" src="/scripts/jquery.min.js"></script>
  <script type="text/javascript" src="/scripts/moment.min.js"></script>
  <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
  <script type="text/javascript" src="/scripts/bootstrap-datetimepicker.*js"></script>
  <!-- include your less or built css files  -->
  <!-- 
  bootstrap-datetimepicker-build.less will pull in "../bootstrap/variables.less" and "bootstrap-datetimepicker.less";
  or
  <link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
  -->
</head>

Rails Gem Version

Add the following to your Gemfile:

gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.14.30'

Note: You may need to change the version number above to the version number on the badge above.

Meteor.js

This widget has been package for the Meteor.js platform, to install it use meteorite as follows:

$ mrt add tsega:bootstrap3-datetimepicker

For more detail see the package page on Atmosphere
Manual
Acquire jQuery
Acquire Moment.js
Bootstrap 3 collapse and transition plugins

Make sure to include *.JS files for plugins collapse and transitions. They are included with bootstrap in js/ directory Alternatively you could include the whole bundle of bootstrap plugins from bootstrap.js

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/moment.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>

Knockout

ko.bindingHandlers.dateTimePicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().dateTimePickerOptions || {};
        $(element).datetimepicker(options);
 
        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                if (event.date != null && !(event.date instanceof Date)) {
                    value(event.date.toDate());
                } else {
                    value(event.date);
                }
            }
        });
 
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            var picker = $(element).data("DateTimePicker");
            if (picker) {
                picker.destroy();
            }
        });
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
 
        var picker = $(element).data("DateTimePicker");
        //when the view model is updated, update the widget
        if (picker) {
            var koDate = ko.utils.unwrapObservable(valueAccessor());
 
            //in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this
            koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate.replace(/[^0-9]/g, ''))) : koDate;
 
            picker.date(koDate);
        }
    }
};
<strong>CSS styles</strong>
Using LESS
<pre lang="jquery">
@import "/path/to/bootstrap/less/variables";
@import "/path/to/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less";

// […] your custom styles and variables

Using CSS (default color palette)

<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
Subscribe to the JqueryPlugins.net mailing list:

* indicates required

Reply

Pin It on Pinterest