bootstrap-material-datetimepicker

Material DateTimePicker

Originaly designed for Bootstrap Material, the V2.0 is now completely standalone and responsive.

Updates

Date Author Description
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

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