Date Picker
Bootstrap Date Picker
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.
This documentation may contain syntax introduced in the MDB 4.17.0 and can be incompatible with previous versions. For old Date Picker documentation please follow the link.
Basic example MDB Pro component
The new date picker opens when you click the icon on the right side, not on input.
<div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
// Data Picker Initialization
$('.datepicker').datepicker();
Initialization required
To use our Material DatePicker you have to initialize it first with the code below.
Note: Javascript numeration
Months in a JavaScript Date object are zero-indexed. Meaning,
new Date(2015, 3, 20)is 20 April, 2015.To stay consistent with this, whenever an integer is used in reference to a month, datepicker treats it as zero-indexed. Dates as strings are still parsed as expected.
Inline mode
<div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker" inline="true">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix"></i>
</div>
// Data Picker Initialization
$('.datepicker').datepicker({
inline: true
});
Note: Javascript numeration
Months in a JavaScript Date object are zero-indexed. Meaning,
new Date(2015, 3, 20)is 20 April, 2015.To stay consistent with this, whenever an integer is used in reference to a month, datepicker treats it as zero-indexed. Dates as strings are still parsed as expected.
Default settings
These are the default settings applied to the basic invocation above. To change them, simply initialize the Date Picker with the desired values.
// Strings and translations
monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showMonthsShort: undefined,
showWeekdaysFull: undefined,
// Buttons
today: 'Today',
clear: 'Clear',
close: 'Close',
// Accessibility labels
labelMonthNext: 'Next month',
labelMonthPrev: 'Previous month',
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year',
// Formats
format: 'd mmmm, yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,
// Editable input
editable: undefined,
// Dropdown selectors
selectYears: undefined,
selectMonths: undefined,
// First day of the week
firstDay: undefined,
// Date limits
min: undefined,
max: undefined,
// Disable dates
disable: undefined,
// Root picker container
container: undefined,
// Hidden input container
containerHidden: undefined,
// Close on a user action
closeOnSelect: true,
closeOnClear: true,
// Events
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,
// Classes
klass: {
// The element states
input: 'picker__input',
active: 'picker__input--active',
// The root picker and states *
picker: 'picker',
opened: 'picker--opened',
focused: 'picker--focused',
// The picker holder
holder: 'picker__holder',
// The picker frame, wrapper, and box
frame: 'picker__frame',
wrap: 'picker__wrap',
box: 'picker__box',
// The picker header
header: 'picker__header',
// Month navigation
navPrev: 'picker__nav--prev',
navNext: 'picker__nav--next',
navDisabled: 'picker__nav--disabled',
// Month & year labels
month: 'picker__month',
year: 'picker__year',
// Month & year dropdowns
selectMonth: 'picker__select--month',
selectYear: 'picker__select--year',
// Table of dates
table: 'picker__table',
// Weekday labels
weekdays: 'picker__weekday',
// Day states
day: 'picker__day',
disabled: 'picker__day--disabled',
selected: 'picker__day--selected',
highlighted: 'picker__day--highlighted',
now: 'picker__day--today',
infocus: 'picker__day--infocus',
outfocus: 'picker__day--outfocus',
// The picker footer
footer: 'picker__footer',
// Today, clear, & close buttons
buttonClear: 'picker__button--clear',
buttonClose: 'picker__button--close',
buttonToday: 'picker__button--today'
}
Customization
Strings
Change the month and weekday labels as you wish:
$('.datepicker').datepicker({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
showMonthsShort: true
})
<div class="md-form md-outline input-with-post-icon datepicker" id="customDays">
<input placeholder="Select date" type="text" id="Customization" class="form-control">
<label for="Customization">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Buttons
Change the text, or hide a button completely, by passing a false-y value:
$('.datepicker').datepicker({
ok: '',
clear: 'Clear selection',
close: 'Cancel'
})
<div class="md-form md-outline input-with-post-icon datepicker" id="falseY">
<input placeholder="Select date" type="text" id="buttons-example" class="form-control">
<label for="buttons-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Accessibility labels
Change the title attributes to several elements within the picker:
$('.datepicker').datepicker({
labelMonthNext: 'Go to the next month',
labelMonthPrev: 'Go to the previous month',
labelMonthSelect: 'Pick a month from the dropdown',
labelYearSelect: 'Pick a year from the dropdown',
selectMonths: true,
selectYears: true
})
<div class="md-form md-outline input-with-post-icon datepicker" id="accLabels">
<input placeholder="Select date" type="text" id="accessibility-example" class="form-control">
<label for="accessibility-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Translations
The picker can be extended to add support for internationalization. Translations for over 40 languages are available out of the box, which you can include in one of two ways:
// Extend the default picker options for all instances.
$.extend($.fn.datepicker.defaults, {
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre',
'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'aujourd\'hui',
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
})
// Or, pass the months and weekdays as an array for each invocation.
$('.datepicker').datepicker({
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre',
'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
})
<div class="md-form md-outline input-with-post-icon datepicker" id="translat">
<input placeholder="Select date" type="text" id="translat-example" class="form-control">
<label for="translat-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Note:
When using translations, specify formatSubmit and data-value to ensure the date parses correctly regardless of locale.
Formats
Display a human-friendly format and use an alternate one to submit to the server.
This is done by creating a new hidden input element with the same name attribute as the
original with an optional prefix/suffix:
$('.datepicker').datepicker({
// Escape any “rule” characters with an exclamation mark (!).
format: 'You selecte!d: dddd, dd mmm, yyyy',
formatSubmit: 'yyyy/mm/dd',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'
})
<div class="md-form md-outline input-with-post-icon datepicker" id="formatsSection">
<input placeholder="Select date" type="text" id="formats-example" class="form-control">
<label for="formats-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Send the hidden value only
A majority of the time, the value that needs to be sent to the server is just the hidden value — and not the
visible one. To make this happen, use the hiddenName option.
This essentially nullifies hiddenPrefix and hiddenSuffix, strips the name
attribute from the source input, and then sets it as the name of the hidden
input:
$('.datepicker').datepicker({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
showMonthsShort: true
})
<div class="md-form md-outline input-with-post-icon datepicker" id="formatsSection">
<input placeholder="Select date" type="text" id="formats-example" class="form-control">
<label for="formats-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Pre-fill values using custom formats or translations
When using a custom formatting rule for the format option, or when
using translations, the input element should be given a
data-value
attribute formatted
using the [yyyy,m,dd] while months count from 0 to 11 — the element’s value can be left
blank. This helps to parse the
date from custom formats into various languages:
<div class="md-form md-outline input-with-post-icon datepicker" id="prefill">
<input placeholder="Select date" type="text" id="prefill-example" class="form-control">
<label for="prefill-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
$('#prefill').datepicker({
});
Formatting rules
The following rules can be used to format any date:
| Rule | Description | Result |
|---|---|---|
d |
Date of the month | 1 – 31 |
dd |
Date of the month with a leading zero | 01 – 31 |
ddd |
Day of the week in short form | Sun – Sat |
dddd |
Day of the week in full form | Sunday – Saturday |
m |
Month of the year | 1 – 12 |
mm |
Month of the year with a leading zero | 01 – 12 |
mmm |
Month name in short form | Jan – Dec |
mmmm |
Month name in full form | January – December |
yy |
Year in short form * | 00 – 99 |
yyyy |
Year in full form | 2000 – 2999 |
Note:
If you use the
yyrule in theformatoption, you must specify theyyyyrule in theformatSubmitoption with the appropriatedata-valueattribute to ensure the the date parses accurately.Never use the
yyrule in theformatSubmitoption.
First weekday
The first day of the week can be set to either Sunday or Monday. Anything truth-y sets it as Monday and anything false-y as Sunday:
$('.datepicker').datepicker({
firstDay: 0
})
<div class="md-form md-outline input-with-post-icon datepicker" id="firstWeekday">
<input placeholder="Select date" type="text" id="firstWeekday-example" class="form-control">
<label for="firstWeekday-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Date limits
Set the minimum and maximum selectable dates on the picker:
1. Using JavaScript Date object:
$('.datepicker').datepicker({ min: new Date(2015,3,20),
max: new Date(2015,7,14)
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
2. Using arrays formatted as [YEAR,MONTH,DATE]
$('.datepicker').datepicker({ min: [2015,3,20],
max: [2015,7,14]
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
3. Using integers or a boolean
$('.datepicker').datepicker({
// An integer (positive/negative) sets it relative to today.
min: -15,
// `true` sets it to today. `false` removes any limits.
max: true
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Disable dates
Disable a specific or arbitrary set of dates selectable on the picker.
You can do it by:
1. Using JavaScript Date object
$('.datepicker').datepicker({
disable: [
new Date(2015,3,13),
new Date(2015,3,29)
]
})
<div class="md-form md-outline input-with-post-icon datepicker" id="firstDisable">
<input placeholder="Select date" type="text" id="firstDisable-example" class="form-control">
<label for="firstDisable-example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
2. Using arrays formatted as [YEAR,MONTH,DATE]
$('.datepicker').datepicker({
disable: [
[2015,3,3],
[2015,3,12],
[2015,3,20]
]
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
3. Using integers as days of the week (1 to 7)
$('.datepicker').datepicker({
disable: [
1, 4, 7
]
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
4. Using objects as a range of dates
$('.datepicker').datepicker({
disable: [
{ from: [2016,2,14], to: [2016,2,27] }
]
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Note:
When it comes to disabling particular dates, the values for
from&tocan be a JavaScriptDateobject, an array formatted as[YEAR,MONTH,DATE]or abooleanvalue (truesets the date as “today”).The values can also be integers representing dates relative to the other, where
tocan only be positive ({ from: [2016,3,12], to: 10 }), whilefromcan only be negative ({ from: -10, to: true })
5. Disabling all with a set of exceptions
Enable only a specific or arbitrary set of dates by setting the the first item in the collection as
true:
$('.datepicker').datepicker({
disable: [
true,
1, 4, 7,
[2015,3,3],
[2015,3,12],
[2015,3,20],
new Date(2015,3,13),
new Date(2015,3,29)
]
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
6. Disabling ranges with exceptions
Enable dates that fall within a range of disabled dates by adding an the inverted parameter to the item within the collection:
$('.datepicker').datepicker({
disable: [
5,
[2015, 10, 21, 'inverted'],
{ from: [2016, 3, 15], to: [2016, 3, 25] },
[2016, 3, 20, 'inverted'],
{ from: [2016, 3, 17], to: [2016, 3, 18], inverted: true }
]
})
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="text" id="example" class="form-control">
<label for="example">Try me...</label>
<i class="fas fa-calendar input-prefix" tabindex=0></i>
</div>
Events
Fire off events as the user interacts with the picker:
$('.datepicker').datepicker({
onStart: function() {
console.log('Hello there :)')
},
onRender: function() {
console.log('Whoa.. rendered anew')
},
onOpen: function() {
console.log('Opened up')
},
onClose: function() {
console.log('Closed now')
},
onStop: function() {
console.log('See ya.')
},
onSet: function(context) {
console.log('Just set stuff:', context)
}
})
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<label for="date-picker-example">Try me...</label>
</div>
Default Date Picker
<div class="md-form md-outline input-with-post-icon datepicker">
<input placeholder="Select date" type="date" id="example" class="form-control">
<label for="example">Try me...</label>
</div>