Options

Docs Datedropper Javascript

Guides

Legal

On this page:

    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 in kebab-case, like data-dd-opt-[OPTION_KEY] 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. Options must be declared in camel-case.

    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.

    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
    vi Tiếng việt Download
    zh 中文 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'
});

    LANGUAGE TEMPLATE

    You can manually add your custom language by using this template. You just replace the values with the translations you want and replace the LANGUAGE_CODE parameter with the language code you choose.

    dateDropperSetup.languages[LANGUAGE_CODE] = {
    "name": "English",
    "m": {
        "s": ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "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 change it",
        "y": {
            "selector": "Years selector",
            "prev": "Previuous year",
            "next": "Next year"
        },
        "m": {
            "selector": "Months selector",
            "prev": "Previuous month",
            "next": "Next month"
        },
        "d": {
            "selector": "Days selector",
            "prev": "Previuous day",
            "next": "Next day"
        }
    }
};

    new dateDropper({
  selector: '#myInput',
  lang: LANGUAGE_CODE
});

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

    inline

    By default, datedropper is a dialog window that appers around the trigger when it's fired. But, if you set inline option to true the datepicker will be appended inside the selector node (that in this case we suggest to use a <div>) as a standalone dialog.

    Type boolean
    Default false

    EXAMPLES

    Sample configuration with data attribute

    <div id="myInput" data-dd-opt-inline="true"></div>

    Sample configuration with Javascript

    new dateDropper({
  selector: '#myInput',
  inline: true
});

    Hey!

    How do you want to signup?

    By signing up, you accept our Terms and conditions and confirm to have read our Privacy Policy.

    Signup with your email

    We've sent a passkey to your email, check your inbox and copy and paste the passkey code here to confirm your identity!