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-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.

Index

Basic options

Styling options

Date options

Advanced options

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
});

Style options

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
});

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'
});

Date options

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
});

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
});

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

Monday 0
Tuesday 1
Wednseday 2
Thursday 3
Friday 4
Saturday 5
Sunday 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'
});

Advanced options

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
});