mdbootstrap-material-datetimepicker
Material DateTimePicker
Originaly designed for Bootstrap Material, the V2.0 is now completely standalone and responsive.
Updates
| Date | Author | Description |
|---|---|---|
| 2020-12-02 | LogicWrite | Change to mdb |
| 2016-04-08 | donovansolms | Disable specific days (#60 and #97) |
| 2016-04-08 | T00rk | Fixed #85 |
| 2016-04-08 | FoxyCorndog | Fix PM overwrite bug |
| 2016-02-17 | T00rk | Changed Clock to SVG |
| 2016-02-04 | T00rk | Added a "Now" button (#38) |
| 2016-01-30 | T00rk | Switch view on click (#39, #47) |
| 2016-01-29 | T00rk | Added "clear button" (#48) |
| 2016-01-29 | T00rk | Replace rem by em (#26) |
| 2016-01-29 | T00rk | Display 24H clock (#54) |
| 2016-01-29 | T00rk | Close on "ESC" (#52) |
| 2015-10-19 | drblue | Fixed erroneous package.json-file |
| 2015-10-19 | Perdona | Fix auto resize when month has 6 weeks |
| 2015-07-01 | T00rk | Redesigned element without using modal |
| 2015-06-16 | T00rk | Use Timepicker alone / Display short time (12 hours) |
| 2015-06-13 | T00rk | Fixed issue with HTML value tag |
| 2015-05-25 | T00rk | Changed repo name to bootstrap-material-datetimepicker * |
| 2015-05-12 | T00rk | Added parameters for button text |
| 2015-05-05 | Sovanna | FIX undefined _minDate in isBeforeMaxDate func |
| 2015-04-10 | T00rk | Little change in clock design |
| 2015-04-10 | Peterzen | Added bower and requirejs support |
| 2015-04-08 | T00rk | Fixed problem on locale switch |
| 2015-03-04 | T00rk | Added Time picker |
| (*) File names have been changed |
bootstrap-material-datepicker.js => bootstrap-material-datetimepicker.js
bootstrap-material-datepicker.css => bootstrap-material-datetimepicker.css
Prerequisites
jquery http://jquery.com/download/
momentjs http://momentjs.com/
Google Material Icon Font <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Live Example
Usage
$('input').bootstrapMaterialDatePicker();
bower
bower install bootstrap-material-datetimepicker
Parameters
| Name | Type | Description |
|---|---|---|
| format | String | MomentJS Format |
| shortTime | Boolean | true => Display 12 hours AM |
| minDate | (String|Date|Moment) | Minimum selectable date |
| maxDate | (String|Date|Moment) | Maximum selectable date |
| currentDate | (String|Date|Moment) | Initial Date |
| year | Boolean | true => Has Yearpicker |
| date | Boolean | true => Has Datepicker |
| disabledDays | Array | Array containing day indices (1-7) to disable |
| time | Boolean | true => Has Timepicker |
| clearButton | Boolean | true => Show Clear Button |
| nowButton | Boolean | true => Show Now Button |
| switchOnClick | Boolean | true => Switch view on click (default: false) |
| cancelText | String | Text for the cancel button (default: Cancel) |
| okText | String | Text for the OK button (default: OK) |
| clearText | String | Text for the Clear button (default: Clear) |
| nowText | String | Text for the Now button (default: Now) |
| triggerEvent | String | Event to fire the calendar (default: focus) |
| monthPicker | Boolean | true => Act as monthpicker (hide calendar) (default: false) |
Events
| Name | Parameters | Description |
|---|---|---|
| beforeChange | event, date | OK button is clicked |
| change | event, date | OK button is clicked and input value is changed |
| yearSelected | event, date | New year is selected |
| dateSelected | event, date | New date is selected |
| open | event | datepicker is opened |
| close | event | datepicker is closed |
Methods
$('input').bootstrapMaterialDatePicker('setDate', moment());
| Name | Parameter | Description |
|---|---|---|
| setDate | (String|Date|Moment) | Set initial date |
| setMinDate | (String|Date|Moment) | Set minimum selectable date |
| setMaxDate | (String|Date|Moment) | Set maximum selectable date |
| destroy | NULL | Destroy the datepicker |