How to Configure Options
Datedropper offers two ways to configure options, allowing you to customize its behavior to meet your needs:
- Using data attributes directly in the HTML markup.
- Using JavaScript during the initialization process.
Configuring Options with Data Attributes
To configure options using data attributes, simply add and customize the relevant attributes in kebab-case format (e.g., data-option-[OPTION_KEY]) to the element where datedropper is applied.
For example, you can adjust the date format and make the calendar expandable by setting the following attributes:
<input
type="text"
data-option-format="y-mm-dd"
data-option-expandable="true"
/>Configuring Options with JavaScript
Alternatively, you can set options programmatically during the initialization by customizing the datedropper function. When using JavaScript, options must be specified in camelCase format.
new dateDropper('#myInput', {
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
- inline
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
new dateDropper('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-option-format="mm-dd-y">Sample configuration with Javascript
new dateDropper('#myInput', {
format: 'd-m-y'
});
Language Option
The lang option allows you to set the language of the date picker. By default, the language is set to English, but you can change it to another language. To do this, download the corresponding language library from the list below, include it in the <head> section of your HTML after the dateDropper script, and then configure the desired language in the dateDropper options, as shown below.
Features
| Type | string |
| Default | en |
Available Languages
| ar | Arabic | Download |
| da | Danish | Download |
| de | German | Download |
Examples
Configuration using a data attribute:
<input type="text" data-option-lang="es">Configuration using JavaScript:
new dateDropper('#myInput', {
lang: 'es'
});Custom Language Template
You can add a custom language by using the following template. Replace the values with your translations and update the LANGUAGE_CODE with your chosen language code.
dateDropperSetup.languages[LANGUAGE_CODE] = {
"name": "Your Language Name",
"m": {
"s": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"f": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
},
"w": {
"s": ["S", "M", "T", "W", "T", "F", "S"],
"f": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
},
"labels": {
"confirm": "%s has been selected. Press enter to confirm.",
"invalid": "You can't select %s based on calendar options.",
"select": "Choose date",
"title": "DateDropper calendar view",
"expand": "Make calendar larger",
"collapse": "Make calendar smaller",
"back": "Back to main years dialog",
"selected": "%s selected",
"arrows": "Use keyboard arrows left and right to navigate.",
"y": {
"selector": "Years selector",
"prev": "Previous year",
"next": "Next year"
},
"m": {
"selector": "Months selector",
"prev": "Previous month",
"next": "Next month"
},
"d": {
"selector": "Days selector",
"prev": "Previous day",
"next": "Next day"
}
}
};new dateDropper('#myInput', {
lang: LANGUAGE_CODE
});showArrowsOnHover
This option controls the visibility of the navigation arrows. If set to false, the arrows will always be visible, regardless of hover actions.
| Type | boolean |
| Default | true |
Examples
Configuration using a data attribute:
<input type="text" data-option-show-arrows-on-hover="false">Configuration using JavaScript:
new dateDropper('#myInput', {
showArrowsOnHover: false
});customClass
The customClass option allows you to add a custom CSS class to the parent node of the datepicker. This is useful for customizing the appearance of the datepicker. Learn more about customizing the datepicker style.
| Type | string |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-custom-class="myClass">Configuration using JavaScript:
new dateDropper('#myInput', {
customClass: 'myClass'
});overlay
Enable the overlay option by setting it to true to obscure the background with an overlay. This is particularly useful for focusing the user's attention on the datepicker.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-overlay="true">Configuration using JavaScript:
new dateDropper('#myInput', {
overlay: true
});defaultDate
The defaultDate option allows you to set a specific default date for the date picker. Note that the date must be provided in the standard format yyyy/mm/dd (e.g., '2019/03/28').
| Type | string |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-default-date="2019/12/31">Configuration using JavaScript:
new dateDropper('#myInput', {
defaultDate: '2019/12/31'
});Advanced Options
expandable
Enable the expandable option by setting it to true to allow users to toggle the date picker to an expanded calendar view.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-expandable="true">Configuration using JavaScript:
new dateDropper('#myInput', {
expandable: true
});expandedDefault
Use the expandedDefault option to open the date picker with the expanded calendar view by default. Set this option to true to enable it.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-expanded-default="true">Configuration using JavaScript:
new dateDropper('#myInput', {
expandedDefault: true
});expandedOnly
The expandedOnly option ensures that the date picker opens exclusively in the expanded calendar view. Set this option to true to enable it.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-expanded-only="true">Configuration using JavaScript:
new dateDropper('#myInput', {
expandedOnly: true
});doubleView
When the doubleView option is set to true and the datepicker is in expanded mode, it displays two calendar views instead of one, enabling easier range selection.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-double-view="true">Configuration using JavaScript:
new dateDropper('#myInput', {
doubleView: true
});preset
The preset option allows you to customize the appearance of the datepicker by choosing a specific structure. This option supports predefined presets to tailor the behavior of the datepicker.
| Type | boolean |
| Default | false |
Presets
| Option | Result |
| onlyMonth | Displays a datepicker with only the month selector. |
| onlyYear | Displays a datepicker with only the year selector. |
Examples
Configuration using a data attribute:
<input type="text" data-option-preset="onlyMonth">Configuration using JavaScript:
new dateDropper('#myInput', {
preset: 'onlyMonth'
});maxYear and minYear
Use the maxYear and minYear options to define the maximum and minimum selectable years. These values should be provided in the format yyyy (e.g., '2019').
| Option | Type | Default |
| minYear | integer | currentYear - 50 |
| maxYear | integer | currentYear + 50 |
Examples
Configuration using a data attribute:
<input type="text" data-option-max-year="2050" data-option-min-year="2000">Configuration using JavaScript:
new dateDropper('#myInput', {
maxYear: 2050,
minYear: 2000
});jump
The jump option allows the user to move through years in increments, as defined by its value, by clicking on the years block. The range is restricted between minYear and maxYear.
| Type | integer/false |
| Default | 10 |
Examples
Configuration using a data attribute:
<input type="text" data-option-jump="5">Configuration using JavaScript:
new dateDropper('#myInput', {
jump: 5
});startFromMonday
Set the startFromMonday option to true to make the week start on Monday instead of Sunday.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-start-from-monday="true">Configuration using JavaScript:
new dateDropper('#myInput', {
startFromMonday: true
});maxDate and minDate
Use the maxDate and minDate options to restrict the selectable dates to a specific range. Dates must be formatted as yyyy/mm/dd (e.g., '2019/03/28').
| Option | Type | Default |
| maxDate | string | false |
| minDate | string | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-max-date="2022/12/31" data-option-min-date="2021/01/01">Configuration using JavaScript:
new dateDropper('#myInput', {
maxDate: "2022/12/31",
minDate: "2021/01/01"
});disabledDays
The disabledDays option disables specific dates in the datepicker. Dates must be formatted as yyyy/mm/dd and provided as a comma-separated list (e.g., '2019/12/30,2019/12/31').
| Type | string/false |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-disabled-days="2019/12/30,2019/12/31">Configuration using JavaScript:
new dateDropper('#myInput', {
disabledDays: "2019/12/30,2019/12/31"
});enabledDays
The enabledDays option allows you to enable only the specified dates. Dates must be formatted as yyyy/mm/dd and provided as a comma-separated list (e.g., '2019/12/30,2019/12/31').
| Type | string/false |
| Default | false |
Examples
Configuration using a data attribute:
<input type="text" data-option-enabled-days="2019/12/30,2019/12/31">Configuration using JavaScript:
new dateDropper('#myInput', {
enabledDays: "2019/12/30,2019/12/31"
});range
The range option can be used with one or two inputs. When enabled, it allows the selection of a start and an end date within the same date picker. If two inputs are used, the first will be filled with the start date, and the second with the end date.
| Type | string/false |
| Default | false |
Examples
Configuration using multiple inputs:
<input id="outward-date" type="text">
<input id="return-date" type="text">Configuration using JavaScript:
new dateDropper('#myInput', {
range: true
});minRange and maxRange
These options limit the range of selectable days when using the range option. The values indicate the minimum and maximum number of days that can be selected, and they only work when the range option is enabled.
| Type | integer/boolean |
| Default | false |
Examples
Configuration using a data attribute:
<input id="myInput" type="text" data-option-min-range="8" data-option-max-range="12">Configuration using JavaScript:
new dateDropper('#myInput', {
minRange: 8,
maxRange: 12
});rangeStart & rangeEnd
Use these options to set default start and end dates for the range. The dates must be formatted as yyyy/mm/dd.
| Type | string |
| Default | false |
Examples
Configuration using a data attribute:
<input id="myInput" type="text" data-option-range-start="2021/04/01" data-option-range-end="2021/04/10">Configuration using JavaScript:
new dateDropper('#myInput', {
rangeStart: "2021/04/01",
rangeEnd: "2021/04/10"
});disabledWeekDays
This option allows you to disable specific days of the week. Each number corresponds to a specific weekday. Use a comma-separated list to specify the days.
| Type | string/array |
| Default | false |
Value
| Sunday | 0 |
| Monday | 1 |
| Tuesday | 2 |
| Wednesday | 3 |
| Thursday | 4 |
| Friday | 5 |
| Saturday | 6 |
Examples
Configuration using a data attribute:
<input type="text" data-option-disabled-week-days="0,6">Configuration using JavaScript:
new dateDropper('#myInput', {
disabledWeekDays: '0,6'
});changeValueTo
Use the changeValueTo option to define a selector where the selected date should be passed. The selector must be an input element.
| Type | string |
| Default | null |
Examples
HTML:
<button class="myDatedropper" data-option-change-value-to="#myInput">Open datepicker</button>
<input id="myInput" />JavaScript:
new dateDropper({
selector: '#myDatedropper',
changeValueTo: '#myInput'
});autoFill
By default, dateDropper automatically fills the input with the selected date when it initializes or the date changes. Set the autoFill option to false to disable this behavior.
| Type | boolean |
| Default | true |
Examples
Configuration using a data attribute:
<input type="text" data-option-auto-fill="false">Configuration using JavaScript:
new dateDropper('#myInput', {
autoFill: false
});loopAll
If set to false, this option locks navigation and hides the arrows in the focused block (day, month, year) when the minimum or maximum value is reached.
| Type | boolean |
| Default | true |
Examples
Configuration using a data attribute:
<input type="text" data-option-loop-all="false">Configuration using JavaScript:
new dateDropper('#myInput', {
loopAll: false
});loopYears
If set to false, this option locks navigation and hides the arrows in the year block when the minimum or maximum year is reached.
| Type | boolean |
| Default | true |
Examples
Configuration using a data attribute:
<input type="text" data-option-loop-years="false">Configuration using JavaScript:
new dateDropper('#myInput', {
loopYears: false
});loopMonths
If set to false, this option locks navigation and hides the arrows in the month block when the minimum or maximum month is reached.
| Type | boolean |
| Default | true |
Examples
Configuration using a data attribute:
<input type="text" data-option-loop-months="false">Configuration using JavaScript:
new dateDropper('#myInput', {
loopMonths: false
});loopDays
If set to false, this option locks navigation and hides the arrows in the day block when the minimum or maximum day is reached.
| Type | boolean |
| Default | true |
Examples
Configuration using a data attribute:
<input type="text" data-option-loop-days="false">Configuration using JavaScript:
new dateDropper('#myInput', {
loopDays: false
});inline
By default, dateDropper is a dialog window that appears around the trigger when activated. If the inline option is set to true, the datepicker will be appended directly inside the selector node (suggested to be a <div>) as a standalone dialog.
| Type | boolean |
| Default | false |
Examples
Configuration using a data attribute:
<div id="myInput" data-option-inline="true"></div>Configuration using JavaScript:
new dateDropper('#myInput', {
inline: true
});