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 customizieng the selector as follows:
<input type="text" data-dd-opt-format="y-mm-dd" data-dd-opt-expandable="true">Set an option by using Javascript
You can also set an option during the initialization by customizing the related datedropper function.
new dateDropper({
format: "y-mm-dd",
expandable: true
});Options and default values
datedropper provides you with several options to customize your date picker.
Basic options
Advanced options
- expandable
- expandedDefault
- expandedOnly
- doubleView
- preset
- maxYear
- minYear
- jump
- startFromMonday
- maxDate
- minDate
- disabledDays
- enabledDays
- range
- minRange
- maxRange
- rangeStart
- rangeEnd
- disabledWeekDays
- changeValueTo
- autoFill
- loopAll
- loopYears
- loopMonths
- loopDays
Basic options
selector
This option sets the elements that will run the datepicker. It basically excecutes a querySelectorAll of the selector specified.
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" placeholder="Date 1">
<input type="text" placeholder="Date 2">
Sample configuration with Javascript
new dateDropper({
selector:'input'
});format
Use the format option to customize the format of the output date.
| Type | string |
| Default | mm/dd/y |
ALLOWED VALUES
| y | four digit year value, e.g. 2019 |
| MM | full name of the month, e.g. January |
| M | short name of the month, e.g. Jan |
| WW | full name of the weekday, e.g. Monday |
| W | short name of the weekday, e.g. Mon |
| w | weekday number, as per getDay() javascript function, e.g. 1 |
| mm | month in numbers with leading zero, e.g. 01 |
| m | month in numbers without leading zero, e.g. 1 |
| dd | weekday in numbers with leading zero, e.g. 01 |
| d | 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-opt-format="mm-dd-y">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
format: 'd-m-y'
});
lang
Use the lang option to set the language of your date picker. English is preinstalled but if you want to change it you have to download language library from the list below, then include it to the <head> after the datedropper one and, once done, set your datepicker language in the datedropper options as shown below.
FEATURES
| Type | string |
| Default | en |
LANGUAGES
| ar | Arabic | Download |
| da | Danish | Download |
| de | German | Download |
| es | Spanish | Download |
| fr | French | Download |
| gr | Greek | Download |
| hu | Hungarian | Download |
| it | Italian | Download |
| ko | Korean | Download |
| nl | Dutch | Download |
| pl | Polish | Download |
| pt | Portuguese | Download |
| ru | Russian | Download |
| si | Slovenian | Download |
| tr | Turkish | Download |
| uk | Ukrainian | Download |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-lang="es">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
lang: 'es'
});showArrowsOnHover
If false, it automatically makes navigation arrows always visible.
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-show-arrows-on-hover="false">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
showArrowsOnHover: false
});
customClass
Use the customClass option to add a custom class to the paret node of the datepicker. Learn more on how to customize datepicker style.
| Type | string |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-custom-class="myClass">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
customClass: 'myClass'
});overlay
Set the overlay option as true in order to obscure the background by adding an overlay.
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-overlay="true">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
overlay: true
});defaultDate
Use the defaultDate option to set a default date. Keep in mind that the default date must be provided in the standard format yyyy/mm/dd (e.g. '2019/03/28').
| Type | string |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-default-date="2019/12/31">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
defaultDate: true
});
Advanced options
expandable
Set the expandable option as true to enable the button to switch to the expanded view calendar.
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-expandable="true">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
expandable: true
});expandedDefault
Set the expandedDefault option as true to open the date picker with the expanded calendar view by default.
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-expanded-default="true">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
expandedDefault: true
});expandedOnly
Set the expandedOnly option as true to only open the date picker with the expdanded view calendar.
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-expanded-only="true">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
expandedOnly: true
});
doubleView
If true and the datepicker is expanded, it shows two calendar instand of one to have a wire range selection.
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-double-view="true">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
doubleView: true
});preset
Set preset to have a diffent look with a custom structure of datepicker.
| Type | boolean |
| Default | false |
Presets
| Option | Result |
| onlyMonth | It returns a datepicker with just the month selector |
| onlyYear | It returns a datepicker with just the year selector |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-preset="onlyMonth">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
preset: 'onlyMonth'
});maxYear and minYear
Use the maxYear and minYear options to set the maximum and minimum selectable year. The selected year must be provided in the format yyyy (e.g. '2019').
| Option | Type | Default |
| minYear | integer | currentYear - 50 |
| maxYear | integer | currentYear + 50 |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-max-year="2050" data-dd-opt-min-year="2000">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
maxYear: 2050,
minYear: 2000
});jump
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.
| Type | integer/false |
| Default | 10 |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-jump="5">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
jump: 5
});startFromMonday
Set the startFromMonday option as true to start the week from Monday.
| Type | boolean |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-start-from-monday="true">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
startFromMonday: true
});maxDate and minDate
Use the maxDate and the minDate options if you want to make the dates selectable until or from the defined date. Dates must be provided in the standard format yyyy/mm/dd (e.g. '2019/03/28').
| Option | Type | Default |
| maxDate | string | false |
| minDate | string | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-max-date="2022/12/31" data-dd-opt-min-date="2021/01/01">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
maxDate: "2022/12/31",
minDate: "2021/01/01"
});disabledDays
If set, the disabledDays option allows you to disable one or more dates. Dates must be provided in the standard format yyyy/mm/dd, comma separated (e.g. '2019/12/30,2019/12/31').
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-disabled-days="2019/12/30,2019/12/31">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
disabledDays: "2019/12/30,2019/12/31"
});enabledDays
If set, the enabledDays option allows you to only enable the selected dates. Dates must be provided in the standard format yyyy/mm/dd, comma separated (e.g. '2019/12/30,2019/12/31').
| Type | string/false |
| Default | false |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-enabled-days="2019/12/30,2019/12/31">Sample configuration with Javascript
new dateDropper({ selector: '#myInput', enabledDays: "2019/12/30,2019/12/31" });
range
The range option can be set up on one or two elements. When enabled, this option allows the user to select a start and an end date from the same date picker. In case of two input, it will automatically fill the start date on the first input and the end date on the last.
| Type | string/false |
| Default | false |
EXAMPLES
<input id="outward-date" type="text">
<input id="return-date" type="text">new dateDropper({
selector: '#myInput',
range: true
});
minRange and maxRange
If set, they limit the range selection based on the value given when user starts selecting a range date. The value indicates the number of days selectable. Of course, it works only when range option has been set as true.
| Type | integer/boolean |
| Default | false |
EXAMPLES
<input id="myInput" type="text" data-dd-opt-min-range="8" data-dd-opt-max-range="12">new dateDropper({
selector: '#myInput',
minRange: 8,
maxRange: 12
});rangeStart & rangeEnd
Set these values to specify a default start and end of the range. It requires the default string format yyyy-mm-dd.
| Type | string |
| Default | false |
EXAMPLES
<input id="myInput" type="text" data-dd-opt-range-start="2021/04/01" data-dd-opt-range-end="2021/04/10">new dateDropper({
selector: '#myInput',
rangeStart: '2021/04/01',
rangeEnd: '2021/04/10'
});disabledWeekDays
It allows to disabled specific day of the week. Each number corrisponds to a specific week day to disable. Separate numbers with comma.
| Type | string/array |
| Default | false |
Value
| Sunday | 0 |
| Monday | 1 |
| Tuesday | 2 |
| Wednseday | 3 |
| Thursday | 4 |
| Friday | 5 |
| Saturday | 6 |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-disabled-week-days="0,6">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
disabledWeekDays: '0,6'
});
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.
| Type | string |
| Default | null |
EXAMPLES
HTML
<button class="myDatedropper" data-dd-opt-change-value-to="#myInput">Open datepicker</button>
<input id="myInput"/>Javascript
new dateDropper({
selector: '#myDatedropper',
changeValueTo:'#myInput'
});autoFill
By default, datedropper automatically fills out the selector with the selected date whenever it moves or gets initialized (only if the selectors specified are input). Set the autoFill option as false to disable this behavior.
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-auto-fill="false">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
autoFill: false
});
loopAll
If false, it locks navigation and hides arrows of the focused block (day, month, year) when the minimum or maximum value is reached.
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-loop-all="false">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
loopAll: false
});loopYears
If false, it locks navigation and hides arrows of the year block when the minimum or maximum year is reached.
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-loop-years="false">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
loopYears: false
});loopMonths
If false, it locks navigation and hides arrows of the month block when the minimum or maximum month is reached.
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-loop-months="false">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
loopMonths: false
});loopDays
If false, it locks navigation and hides arrows of the day block when the minimum or maximum day is reached.
| Type | boolean |
| Default | true |
EXAMPLES
Sample configuration with data attribute
<input type="text" data-dd-opt-loop-days="false">Sample configuration with Javascript
new dateDropper({
selector: '#myInput',
loopDays: false
});