##Where do you use this?
I'd love to know if your public site is using this plugin and list your logo on the documentation site. Please email me eonasdan at outlook dot com
Run the following command:
bower install eonasdan-bootstrap-datetimepicker#latest --save
PM> Install-Package Bootstrap.v3.Datetimepicker
See the Change Log for important changes and updates
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/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/boostrap.min.css" />
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>Done! Now take a look at the manual for examples and available options.
Datetimepicker requires moment.js. This allows for better support for various date formats and locales. See documentation for examples. Check Momentjs' homepage for documentation on date formats. If you can't use moment.js there's still older version of datetimewidget available here.
<script type="text/javascript" src="/path/to/moment.js"></script>Make sure to include *.JS files for plugins collapse and transitions. They are included with bootstrap in js/ directory
<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>Alternatively you could include the whole bundle of bootstrap plugins from bootstrap.js
<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>@import "/path/to/bootstrap/less/variables";
@import "/path/to/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker";
// [...] your custom styles and variables<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />Finally include the main javascript file.
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>-
Fix for #83: Changes to the picker should fire native
changeevent for knockout and the like as well aschange.dpwhich contains the old date and the new date -
Fix for #78: Script has been update for breaking changes in Moment 2.4.0
-
Fix for #73: IE8 should be working now
-
Enhancement for #79:
minuteSteppingoption takes a number (default is 1). Changing the minutes in the time picker will step by this number. -
Enhancement for #74 and #65:
useMinutesanduseSecondsare now options. Disabling seconds will hide the seconds spinner. Disabling minutes will display00and hide the arrows -
Enhancement for #67: Picker will now attempt to convert all
data-OPTIONinto its appropriate option
- Fix for #51, #60
- Fix for #52: Picker has its own
momentobject since moment 2.4.0 has removed global reference - Fix for #57: New option for
useStrict. When validating dates inupdateandchange, the picker can use a stricter formatting validation - Fix for #61: Picker should now properly take formatted date. Should also have correct start of the week for locales.
- Fix for #62: Default format will properly validate time picker only.
- Custom icons, such as Font Awesome, are now supported. (#49) See Example#9
- If more then one
input-group-addonis present usedatepickerbuttonto identify where the picker should popup from. (#48) - New Event:
error.dp. Fires when Moment cannot parse the date or when the timepicker cannot change because of adisabledDatessetting. Returns a Moment date object. The specific error can be found be usinginvalidAt(). For more information see Moment's docs - Fix for #42, plugin will now check for
Aorain the format string to determine if the AM/PM selector should display. - Fix for #45, fixed null/empty and invalid dates
- Fix for #46, fixed active date highlighting
- Fix for #47,
change.dpevent to also include the previous date.
####New features (2.0.1)!
- New event
error.dpfires when plugin cannot parse date or when increase/descreasing hours/minutes to a disabled date. See Example#7 - Minor fixes
####New features (2.0.0)!
disabledDatesis now an option to set the disabled dates. It accepts date objects likenew Date("November 12, 2013 00:00:00")and12/25/2013' andmoment` date objects. See Example#7 for usage.- Events are easier to use; see Example#8
###Removed features
- pickSeconds
- pick12HourFormat
- maskInput