Options
How to set an option
datedropper options can be set in two ways:
- using a data attribute;
- using Javascript when initializing datedropper.
Set an option by using a data attribute
In order to set an option by using a data attribute, add and customize the related attribute on the element on which datedropper has to be executed.
For instance, you can change the date format by simply customizing the selector as follows:
<input type="text" data-dd-format="S M., Y">Set an option by using Javascript
You can also set an option during the initialization by customizing the related .dateDropper() function variable.
$('.roundtrip-input').dateDropper({
format: 'Y-m-d'
});Options and default values
datedropper provides you with several options to customize your date pickers.
Index
Available on 3.0.0
- format
- lang
- theme
- fx
- fxMobile
- modal
- large
- largeDefault
- largeOnly
- hideDay
- hideMonth
- hideYear
- maxYear
- minYear
- jump
- lock
- startFromMonday
- defaultDate
- maxDate
- minDate
- disabledDays
- enabledDays
- showOnlyEnabledDays
- roundtrip
- autoIncrease
- changeValueTo
- eventListener
- trigger
- autofill
Available on 3.1.0
Basic options
format
| Data attribute | data-dd-format |
| .dateDropper() variable | format |
Use the format option to customize the format of the date returned by datedropper.
FEATURES
| Type | string |
| Default | m/d/Y |
PERMITTED VALUES
| Y | four digit year value, e.g. 2019 |
| F | full name of the month, e.g. January |
| M | short name of the month, e.g. Jan |
| l | full name of the weekday, e.g. Monday |
| D | short name of the weekday, e.g. Mon |
| m | month in numbers with leading zero, e.g. 01 |
| n | month in numbers without leading zero, e.g. 1 |
| d | weekday in numbers with leading zero, e.g. 01 |
| j | weekday in numbers without leading zero, e.g. 1 |
| S | weekday in numbers with a suffix ending, e.g. 1st |
| U | Unix timestamp, e.g. 1577750400 |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-format="d-m-Y">Sample configuration with Javascript
$('#my-input').dateDropper({
format: 'd-m-Y'
});lang
| Data attribute | data-dd-lang |
| .dateDropper() variable | lang |
Use the lang option to set the language of your date picker.
FEATURES
| Type | string |
| Default | en |
AVAILABLE LANGUAGES
| ar | (Arabic) |
| da | (Danish) |
| de | (German) |
| es | (Spanish) |
| fr | (French) |
| gr | (Greek) |
| hu | (Hungarian) |
| it | (Italian) |
| ko | (Korean) |
| nl | (Dutch) |
| pl | (Polish) |
| pt | (Portuguese) |
| ru | (Russian) |
| si | (Slovenian) |
| tr | (Turkish) |
| uk | (Ukrainian) |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-lang="es">Sample configuration with Javascript
$('#my-input').dateDropper({
lang: 'es'
});Styling options
theme
| Data attribute | data-dd-theme |
| .dateDropper() variable | theme |
Use the theme option to set the datedropper theme. Learn more on all the available themes and on how to create your own style.
FEATURES
| Type | string |
| Default | vanilla |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-theme="leaf">Sample configuration with Javascript
$('#my-input').dateDropper({
theme: 'leaf'
});fx and fxMobile
| Data attribute | data-dd-fx | data-dd-fx-mobile |
| .dateDropper() variable | fx | fxMobile |
Use the fx and the fxMobile options to enable or disable any animations/transitions. fxMobile option only affects mobile devices.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-fx="true" data-dd-fx-mobile="false">Sample configuration with Javascript
$('#my-input').dateDropper({
fx: true,
fxMobile: false
});modal
| Data attribute | data-dd-modal |
| .dateDropper() variable | modal |
Set the modal option as true in order to open the date picker as a modal window with an overlay on the background.
FEATURES
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-modal="true">Sample configuration with Javascript
$('#my-input').dateDropper({
modal: true
});large
| Data attribute | data-dd-large |
| .dateDropper() variable | large |
Set the large option as true to enable a button that opens the date picker as a calendar.
FEATURES
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-large="true">Sample configuration with Javascript
$('#my-input').dateDropper({
large: true
});largeDefault
| Data attribute | data-dd-large-default |
| .dateDropper() variable | largeDefault |
Set the largeDefault option as true to open the date picker as a calendar by default.
FEATURES
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-large-default="true">Sample configuration with Javascript
$('#my-input').dateDropper({
largeDefault: true
});largeOnly
| Data attribute | data-dd-large-only |
| .dateDropper() variable | largeOnly |
Set the largeOnly option as true to only open the date picker as a calendar.
FEATURES
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-large-only="true">Sample configuration with Javascript
$('#my-input').dateDropper({
largeOnly: true
});hideDay, hideMonth and hideYear
| Data attribute | data-dd-hide-day | data-dd-hide-month | data-dd-hide-year |
| .dateDropper() variable | hideDay | hideMonth | hideYear |
Set these options as true to hide the day, the month and/or the year block from the date picker.
FEATURES
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-hide-day="true" data-dd-hide-month="true" data-hide-year="false">Sample configuration with Javascript
$('#my-input').dateDropper({
hideDay: true,
hideMonth: true,
hideYear: false
});Customizing dates and any other features
maxYear and minYear
| Data attribute | data-dd-max-year | data-dd-min-year |
| .dateDropper() variable | maxYear | minYear |
Use the maxYear and minYear options to set the maximum and minimum selectable years.
The selected year must be provided in the format yyyy (e.g. '2019').
FEATURES
maxYear
| Type | integer |
| Default | currentYear |
minYear
| Type | integer |
| Default | 1970 |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-max-year="2050" data-dd-min-year="2000">Sample configuration with Javascript
$('#my-input').dateDropper({
maxYear: 2050,
minYear: 2000
});jump
| Data attribute | data-dd-jump |
| .dateDropper() variable | jump |
If the jump option is set as true, by clicking on the years block the user will be allowed to move through the years between minYear and maxYear in multiples of the value defined with the jump option.
FEATURES
| Type | integer/false |
| Default | 10 |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-jump="5">Sample configuration with Javascript
$('#my-input').dateDropper({
jump: 5
});lock
| Data attribute | data-dd-lock |
| .dateDropper() variable | lock |
Set the lock option as equal to from or to if you want to make the dates selectable from or up to the current date.
FEATURES
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-lock="from">Sample configuration with Javascript
$('#my-input').dateDropper({
lock: 'from'
});startFromMonday
| Data attribute | data-dd-start-from-monday |
| .dateDropper() variable | startFromMonday |
Set the startFromMonday option as false to start the week from Sunday.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-start-from-monday="false">Sample configuration with Javascript
$('#my-input').dateDropper({
startFromMonday: false
});defaultDate
| Data attribute | data-dd-default-date |
| .dateDropper() variable | defaultDate |
Use the defaultDate option to select the default date set when opening the date picker. Keep in mind that the default date must be provided in the format mm/dd/yyyy (e.g. '12/31/2019').
FEATURES
| Type | string/object/null |
| Default | null |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-default-date="12/31/2019">Sample configuration with Javascript
$('#my-input').dateDropper({
defaultDate: '12/31/2019'
});maxDate and minDate
| Data attribute | data-dd-max-date | data-dd-min-date |
| .dateDropper() variable | maxDate | minDate |
Use the maxDate and the minDate options if you want to make the dates selectable until or from the defined date.
The date must be provided in the format mm/dd/yyyy (e.g. '12/31/2019').
FEATURES
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-max-date="12/31/2019">Sample configuration with Javascript
$('#my-input').dateDropper({
minDate: '12/31/2019'
});disabledDays
| Data attribute | data-dd-disabled-days |
| .dateDropper() variable | disabledDays |
When enabled, the disabledDays option allows you to disable one or more dates. Dates must be provided in the format mm/dd/yyyy, comma separated (e.g. '12/30/2019,12/31/2019').
FEATURES
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-disabled-days="12/30/2019,12/31/2019">Sample configuration with Javascript
$('#my-input').dateDropper({
disabledDays: '12/30/2019,12/31/2019'
});enabledDays
| Data attribute | data-dd-enabled-days |
| .dateDropper() variable | enabledDays |
When enabled, the enabledDays option allows you to only enable the selected dates. Dates must be provided in the format mm/dd/yyyy, comma separated (e.g. '12/30/2019,12/31/2019').
FEATURES
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-enabled-days="12/30/2019,12/31/2019">Sample configuration with Javascript
$('#my-input').dateDropper({
enabledDays: '12/30/2019,12/31/2019'
});showOnlyEnabledDays
| Data attribute | data-dd-show-only-enabled-days |
| .dateDropper() variable | showOnlyEnabledDays |
The showOnlyEnabledDays option only works when the enabledDays option is defined and, if set as true, it shows only the available dates by using the date picker compact version. Therefore, this option overwrites the large, largeDefault and largeOnly options.
FEATURES
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-enabled-days="12/30/2019,12/31/2019" data-dd-show-only-enabled-days="true">Sample configuration with Javascript
$('#my-input').dateDropper({
enabledDays: '12/30/2019,12/31/2019',
showOnlyEnabledDays: true
});roundtrip
| Data attribute | data-dd-roundtrip |
| .dateDropper() variable | roundtrip |
The roundtrip option can be set up on one or two elements by defining a custom value (e.g. data-dd-roundtrip="trip"). If you set it on two elements, use the same value for both the elements. When enabled, this option allows the user to select outward and return dates from the same date picker.
FEATURES
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input id="outward-date" type="text" data-dd-roundtrip="my-trip">
<input id="return-date" type="text" data-dd-roundtrip="my-trip">Sample configuration with Javascript
$('input').dateDropper({
roundtrip: 'my-trip'
});autoIncrease
| Data attribute | data-dd-auto-increase |
| .dateDropper() variable | autoIncrease |
By default, when the user clicks on the date picker arrows to advance by one day, and it's the last day of the month or year, datedropper will automatically jump to the next month or year. Set the autoIncrease option as false to disable this behavior.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-auto-increase="false">Sample configuration with Javascript
$('#my-input').dateDropper({
autoIncrease: false
});Advanced options
changeValueTo
| Data attribute | data-dd-change-value-to |
| .dateDropper() variable | changeValueTo |
Use the changeValueTo option to define a selector to which datedropper should pass the value set on the date picker. Keep in mind that this selector must be an input.
FEATURES
| Type | string |
| Default | null |
EXAMPLES
Sample configuration with data attribute
<button class="datedropper-init" data-dd-change-value-to="#my-input">Open datepicker</button>
<input id="my-input"/>Sample configuration with Javascript
$('button').dateDropper({
changeValueTo: '#my-input'
});eventListener
| Data attribute | data-dd-event-listener |
| .dateDropper() variable | eventListener |
Use the eventListener option to define the event through which the selector should activate datedropper. By default, the date picker is enabled on focus.
FEATURES
| Type | string |
| Default | focus |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-event-selector="click">Sample configuration with Javascript
$('#my-input').dateDropper({
eventSelector: 'click'
});trigger
| Data attribute | data-dd-trigger |
| .dateDropper() variable | trigger |
A click on the trigger selector activates the eventListener of the datedropper element.
FEATURES
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-trigger="#my-trigger">Sample configuration with Javascript
$('#my-input').dateDropper({
trigger: '.my-trigger'
});autofill
| Data attribute | data-dd-autofill |
| .dateDropper() variable | autofill |
By default, datedropper automatically fills out the selector with the selected date whenever it moves or gets initialized. Set the autofill option as false to disable this behavior.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-autofill="false">Sample configuration with Javascript
$('#my-input').dateDropper({
autofill: false
});
loopAll
| Data attribute | data-dd-loop-all |
| .dateDropper() variable | loopAll |
If false, it locks navigation and hides arrows of the current selector (day, month, year) when the minimum or maximum value is reached.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-loop-all="false">Sample configuration with Javascript
$('#my-input').dateDropper({
loopAll: false
});loopYears
| Data attribute | data-dd-loop-years |
| .dateDropper() variable | loopYears |
If false, it locks navigation and hides arrows of the year selector when the minimum or maximum year is reached.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-loop-years="false">Sample configuration with Javascript
$('#my-input').dateDropper({
loopYears: false
});loopMonths
| Data attribute | data-dd-loop-months |
| .dateDropper() variable | loopMonths |
If false, it locks navigation and hides arrows of the month selector when the minimum or maximum month is reached.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-loop-months="false">Sample configuration with Javascript
$('#my-input').dateDropper({
loopMonths: false
});loopDays
| Data attribute | data-dd-loop-days |
| .dateDropper() variable | loopDays |
If false, it locks navigation and hides arrows of the day selector when the minimum or maximum day is reached.
FEATURES
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-loop-days="false">Sample configuration with Javascript
$('#my-input').dateDropper({
loopDays: false
});