Installing.md 6.2KB
Installing.md 6.2KB
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
Installation Guides
bower 
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: 
PM> Install-Package Bootstrap.v3.Datetimepicker
CSS: 
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 
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. Read the rest of the install instructions @ TrevorS/bootstrap3-datetimepicker-rails
Angular Wrapper
Follow the link here
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);
}
}
};
CSS styles
Using LESS
@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" />