Options guide of datedropper JS

This plugin version is deprecated, get the new version now to stay up to date.

Version:

On this page:

    Try the new datedropper JS configurator to easily get the best plugin configuration!
    Configure now

    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


    Basic options


    selector

    This option sets the elements that will run the datepicker. It basically excecutes a querySelectorAll of the selector specified.

    Typestring/false
    Defaultfalse

    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.

    Typestring
    Defaultmm/dd/y

    ALLOWED VALUES

    yfour digit year value, e.g. 2019
    MMfull name of the month, e.g. January
    Mshort name of the month, e.g. Jan
    WWfull name of the weekday, e.g. Monday
    Wshort name of the weekday, e.g. Mon
    wweekday number, as per getDay() javascript function, e.g. 1
    mmmonth in numbers with leading zero, e.g. 01
    mmonth in numbers without leading zero, e.g. 1
    ddweekday in numbers with leading zero, e.g. 01
    dweekday in numbers without leading zero, e.g. 1
    Sweekday in numbers with a suffix ending, e.g. 1st
    UUnix 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

    Typestring
    Defaulten

    LANGUAGES

    arArabicDownload
    daDanishDownload
    deGermanDownload
    esSpanishDownload
    frFrenchDownload
    grGreekDownload
    huHungarianDownload
    itItalianDownload
    koKoreanDownload
    nlDutchDownload
    plPolishDownload
    ptPortugueseDownload
    ruRussianDownload
    siSlovenianDownload
    trTurkishDownload
    ukUkrainianDownload

    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.

    Typeboolean
    Defaulttrue

    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.

    Typestring
    Defaultfalse

    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.

    Typeboolean
    Defaultfalse

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

    Typestring
    Defaultfalse

    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.

    Typeboolean
    Defaultfalse

    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.

    Typeboolean
    Defaultfalse

    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.

    Typeboolean
    Defaultfalse

    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.

    Typeboolean
    Defaultfalse

    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.

    Typeboolean
    Defaultfalse

    Presets

    OptionResult
    onlyMonthIt returns a datepicker with just the month selector
    onlyYearIt 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').

    OptionTypeDefault
    minYearintegercurrentYear - 50
    maxYearintegercurrentYear + 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.

    Typeinteger/false
    Default10

    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.

    Typeboolean
    Defaultfalse

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

    OptionTypeDefault
    maxDatestringfalse
    minDatestringfalse

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

    Typestring/false
    Defaultfalse

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

    Typestring/false
    Defaultfalse

    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.

    Typestring/false
    Defaultfalse

    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.

    Typeinteger/boolean
    Defaultfalse

    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.

    Typestring
    Defaultfalse

    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.

    Typestring/array
    Defaultfalse

    Value

    Sunday0
    Monday1
    Tuesday2
    Wednseday3
    Thursday4
    Friday5
    Saturday6

    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.

    Typestring
    Defaultnull

    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.

    Typeboolean
    Defaulttrue

    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.

    Typeboolean
    Defaulttrue

    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.

    Typeboolean
    Defaulttrue

    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.

    Typeboolean
    Defaulttrue

    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.

    Typeboolean
    Defaulttrue

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