How to Set an Option
With Timedropper, you can customize its behavior and appearance by setting options. These options can be configured in two main ways:
- By using a data attribute directly on the HTML element.
- By passing options through JavaScript during initialization.
Set an Option Using a Data Attribute
To set an option via a data attribute, add and customize the corresponding attribute in kebab-case (e.g., data-option-[OPTION_KEY]) directly to the HTML element where Timedropper is used. For example, you can customize the date format as follows:
<input type="text" data-option-format="hh:mm" data-option-overlay="true" >Set an Option Using JavaScript
You can also configure options in JavaScript during the initialization process. In this case, options should be written in camelCase. Here's an example:
new timeDropper('#myInput', {
format: "h:m A",
overlay: true
});Options and Default Values
Timedropper offers a variety of options to customize its functionality. Below is an overview of the basic options and their default values.
Basic Options
Advanced Options
- minHour
- maxHour
- minMinutes
- maxMinutes
- disabledHour
- disabledMinutes
- disabledTime
- enabledHour
- enabledMinutes
- enabledTime
Basic Options
Selector
The selector option specifies which elements will use the timepicker. Internally, it executes a querySelectorAll on the provided selector.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="time" placeholder="Select time">Configuration Using JavaScript
new timeDropper('input');Overlay
The overlay option, when set to true, adds an overlay to obscure the background, enhancing focus on the timepicker.
- Type:
boolean - Default:
true
Examples
Configuration Using a Data Attribute
<input type="text" data-option-overlay="true">Configuration Using JavaScript
new timeDropper('#myInput', {
overlay: true
});Format
The format option allows you to specify the date format in which the time will be displayed. Use a string to define the format.
- Type:
string - Default:
hh:mm
Allowed values for Time Picker
| A | AM or PM, e.g. AM |
| H | 24-hour format of the hour without leading zero, e.g. 1 |
| HH | 24-hour format of the hour with leading zero, e.g. 01 |
| a | AM or PM in lowercase, e.g. am |
| h | 12-hour format of the hour without leading zero, e.g. 1 |
| hh | 12-hour format of the hour with leading zero, e.g. 01 |
| m | Minutes without leading zero, e.g. 3 |
| mm | Minutes with leading zero, e.g. 03 |
| str | Formatted time string, e.g. 1:25 am |
Examples
Configuration Using a Data Attribute
<input type="text" data-option-format="h:m a">Configuration Using JavaScript
new timeDropper('#myInput', {
format: "h:m a"
});Language
The lang option sets the language of the timepicker. You can provide a language code like "en", "es", or "fr".
- Type:
string - Default:
"en"
Examples
Configuration Using a Data Attribute
<input type="text" data-option-lang="es">Configuration Using JavaScript
new timeDropper('#myInput', {
lang: "es"
});How to customize language
You can easily add a custom language to Timedropper by using this template. Simply replace the placeholder values with your desired translations and replace the LANGUAGE_CODE with the appropriate code for your language.
timeDropperSetup.languages[LANGUAGE_CODE] = {
name: "English",
labels: {
title: 'Timedropper',
arrows: 'Use the left and right keyboard arrows to change the value',
h: 'Hours selector',
m: 'Minutes selector'
}
};
Custom Class
The customClass option allows you to add custom CSS classes to the timepicker. This is useful for applying specific styles to the timepicker container.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-custom-class="my-custom-class">Configuration Using JavaScript
new timeDropper('#myInput', {
customClass: "my-custom-class"
});Start Time
The startTime option sets the default time shown when the timepicker is opened. It can be set as a time string like "10:00" or a specific time value.
- Type:
string - Default:
"00:00"
Examples
Configuration Using a Data Attribute
<input type="text" data-option-start-time="08:30">Configuration Using JavaScript
new timeDropper('#myInput', {
startTime: "08:30"
});Auto Switch
The autoSwitch option automatically switches between hour and minute.
- Type:
boolean - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-auto-switch="true">Configuration Using JavaScript
new timeDropper('#myInput', {
autoSwitch: true
});Time 12hr
The time_12hr option enables or disables the 12-hour time format (AM/PM).
- Type:
boolean - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-time_12hr="true">Configuration Using JavaScript
new timeDropper('#myInput', {
time_12hr: true
});Interval
The interval option defines the time step when selecting time values. It specifies the minutes between available time options.
- Type:
number - Default:
1
Examples
Configuration Using a Data Attribute
<input type="text" data-option-interval="15">Configuration Using JavaScript
new timeDropper('#myInput', {
interval: 15
});Advanced Options
minHour
The minHour option allows you to set the minimum hour that can be selected in the time picker. The value should be an integer between 0 and 23.
- Type:
number - Default:
0
Examples
Configuration Using a Data Attribute
<input type="text" data-option-min-hour="9">Configuration Using JavaScript
new timeDropper('#myInput', {
minHour: 9
});maxHour
The maxHour option allows you to set the maximum hour that can be selected in the time picker. The value should be an integer between 0 and 23.
- Type:
number - Default:
23
Examples
Configuration Using a Data Attribute
<input type="text" data-option-max-hour="18">Configuration Using JavaScript
new timeDropper('#myInput', {
maxHour: 18
});minMinutes
The minMinutes option allows you to set the minimum minutes that can be selected in the time picker. The value should be an integer between 0 and 59.
- Type:
number - Default:
0
Examples
Configuration Using a Data Attribute
<input type="text" data-option-min-minutes="15">Configuration Using JavaScript
new timeDropper('#myInput', {
minMinutes: 15
});maxMinutes
The maxMinutes option allows you to set the maximum minutes that can be selected in the time picker. The value should be an integer between 0 and 59.
- Type:
number - Default:
59
Examples
Configuration Using a Data Attribute
<input type="text" data-option-max-minutes="45">Configuration Using JavaScript
new timeDropper('#myInput', {
maxMinutes: 45
});disabledHour
The disabledHour option allows you to disable specific hours in the time picker. You can pass values as string separated by comma representing the hours to disable.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-disabled-hour="12, 13">Configuration Using JavaScript
new timeDropper('#myInput', {
disabledHour: "12, 13"
});disabledMinutes
The disabledMinutes option allows you to disable specific minutes in the time picker. You can pass values as string separated by comma representing the minutes to disable.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-disabled-minutes="30, 45">Configuration Using JavaScript
new timeDropper('#myInput', {
disabledMinutes: "30, 45"
});disabledTime
The disabledTime option allows you to disable specific times (both hour and minutes). You can pass values as string separated by comma with the format "HH:MM" to disable specific times.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-disabled-time="12:00, 13:15">Configuration Using JavaScript
new timeDropper('#myInput', {
disabledTime: "12:00, 13:15"
});enabledHour
The enabledHour option allows you to enable specific hours in the time picker. You can pass values as string separated by comma representing the hours to enable.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-enabled-hour="9, 10">Configuration Using JavaScript
new timeDropper('#myInput', {
enabledHour: "9, 10"
});enabledMinutes
The enabledMinutes option allows you to enable specific minutes in the time picker. You can pass values as string separated by comma representing the minutes to enable.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-enabled-minutes="0, 15">Configuration Using JavaScript
new timeDropper('#myInput', {
enabledMinutes: "0, 15"
});enabledTime
The enabledTime option allows you to enable specific times (both hour and minutes) in the time picker. You can pass values as string separated by comma with the format "HH:MM" to enable specific times.
- Type:
string/false - Default:
false
Examples
Configuration Using a Data Attribute
<input type="text" data-option-enabled-time="09:00, 10:30">Configuration Using JavaScript
new timeDropper('#myInput', {
enabledTime: "09:00, 10:30"
});