⇢ View the manual and demos
##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
. Do not submit issue/feature request to this email, they will be ignored.
Change Log for important changes and updates.
See theQuick installation using
bower: ![Bower version](https://camo.githubusercontent.com/9ca1dd89e1e939aebb54fdcda369149fcc92383ba9548e1c7f1513c19932adff/68747470733a2f2f62616467652e667572792e696f2f626f2f656f6e617364616e2d626f6f7473747261702d6461746574696d657069636b65722e706e67)
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](https://camo.githubusercontent.com/869fbd2e726b11625aece65f8bc89c80beab0b8788469337e7648866985286bb/68747470733a2f2f62616467652e667572792e696f2f6e752f426f6f7473747261702e76332e4461746574696d657069636b65722e706e67)
PM> Install-Package Bootstrap.v3.Datetimepicker
Nuget (CSS): ![NuGet version](https://camo.githubusercontent.com/4a75847605361a532dbf060b649be62e82334a99b744d0b4b022d78b4825319d/68747470733a2f2f62616467652e667572792e696f2f6e752f426f6f7473747261702e76332e4461746574696d657069636b65722e4353532e706e67)
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.min.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](https://camo.githubusercontent.com/6255a58a9447e13ea9271e8b63af781ac656f09508883f7ee31ba81d370350bf/68747470733a2f2f62616467652e667572792e696f2f72622f626f6f747374726170332d6461746574696d657069636b65722d7261696c732e706e67)
Add the following to your Gemfile
:
gem 'momentjs-rails', '~> 2.5.0'
gem 'bootstrap3-datetimepicker-rails', '~> 3.0.0'
Read the rest of the install instructions @ TrevorS/bootstrap3-datetimepicker-rails
Done! Now take a look at the manual for examples and available options.
Manual installation
Moment.js
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>
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
<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>
CSS styles
Using LESS
@import "/path/to/bootstrap/less/variables";
@import "/path/to/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker";
// [...] your custom styles and variables
Using CSS (default color palette)
<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
Main JS file
Finally include the main javascript file.
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>
Change Log
3.0.0
Breaking changes in this update! Pay attention!!
- Fix for #170, #179, #183: Changed event to
dp.-
. This should fix the double change event firing. - Fix for #192:
setDate
now firesdp.change
- Fix for #182: Picker will not set the default date if the input field has a value
- Fix for #169: Seconds doesn't get reset when changing the date (Thanks to PR #174)
- Fix for #168 z-index fix for BS modal
- Fix for #155 Picker properly displays the active year and month
- Fix for #154 CSS update to fix the collapse jump
- Fix for #150 and #75
minViewMode
andviewMode
work properly - Fix for #147 AM/PM won't toggle when selecting a value from the hours grid
- Fix for #44 Finally! It's here!! Thanks to @ruiwei and his code on #210 picker will adjust the positioning of the widget.
Manually merged PR
- #178 When using
minuteStepping
the minute select grid will only show available steppings - #195, #197 Using the
data-OPTION
has been changed todata-date-OPTION
. These options are expected to be on theinput-group
if you're using theinput-group
or the a bare input field if you're not using theinput-group
- #184 The option
sideBySide
change be used to display both the d and the timepicker side by side - #143 Added option
daysOfWeekDisabled: []
. For example, usedaysOfWeekDisabled: [0,6]
to disable Sunday and Saturday
Other Changes
- Changed picker width to 300px if using seconds and am/pm
- Added option
useCurrent
, thanks to @ruiwei. When true, picker will set the value to the current date/time (respects picker's format) - Added option
showToday
, thanks to @ruiwei. When true, picker will display a small arrow to indicate today's date. - Changed
startDate
tominDate
andendDate
tomaxDate
to make it more clear what these options do.
2.1.32 (Hotfix)
- Fix for #151: When a bad date value or the picker is cleared, the plugin will not longer attempt to reset it back to the previous date
- Fix for #140:
setDate
can be givennull
to force clear the picker
2.1.30
build.less
file name has been been changed to bootstrap-datetimepicker-build.less
to prevent collisions
Important! -
Fix for #135:
setStartDate
andsetEndDate
should now properly set. -
Fix for #133: Typed in date now respects en/disabled dates
-
Fix for #132: En/disable picker function works again
-
Fix for #117, #119, #128, #121: double event
change
event issues should be fixed -
Fix for #112:
change
function no longer sets the input to a blank value if the passed in date is invalid -
Enhancement for #103: Increated the
z-index
of the widget
2.1.20
-
Fix for #83: Changes to the picker should fire native
change
event for knockout and the like as well aschange.dp
which 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:
minuteStepping
option takes a number (default is 1). Changing the minutes in the time picker will step by this number. -
Enhancement for #74 and #65:
useMinutes
anduseSeconds
are now options. Disabling seconds will hide the seconds spinner. Disabling minutes will display00
and hide the arrows -
Enhancement for #67: Picker will now attempt to convert all
data-OPTION
into its appropriate option
2.1.11
- Fix for #51, #60
- Fix for #52: Picker has its own
moment
object since moment 2.4.0 has removed global reference - Fix for #57: New option for
useStrict
. When validating dates inupdate
andchange
, 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.
2.1.5
- Custom icons, such as Font Awesome, are now supported. (#49) See Example#9
- If more then one
input-group-addon
is present usedatepickerbutton
to 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 adisabledDates
setting. 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
A
ora
in 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.dp
event to also include the previous date.
####2.0.1
- New event
error.dp
fires when plugin cannot parse date or when increase/descreasing hours/minutes to a disabled date. See Example#7 - Minor fixes
####2.0.0