🔗
Demo to preview the settings
🔗
Introduction
A very beautiful lightweight cross-browser date/time picker. Huge set of customization with multi-date and range support. Responsive and accessibility friendly.
Use this plugin to unobtrusively add a date/time picker into your app. It makes it easier to help visitors quickly select dates, times, and/or date ranges on the booking, schedule, and event calendar web apps.
A huge set of customization with multi-date and range support, and responsive and accessibility friendly.
It works in all modern browsers: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Please visit the plugin forum thread: https://forum.bubble.is/t/new-plugin-air-date-time-picker/14328 for more details about the updates
How to setup
Place the element on the page and fill in the fields. You can find a more detailed configuration of the element on the plugin demo page.
Plugin Elements Properties
The plugin contains an Air Date/Time Picker input form which can be used on a page.
Air Date/Time Picker
Element Fields
Title | Description | Type |
Type | Determines the type of dates with which the picker will work.
Available types: Single Date, Multiple Dates, Range, and Only Timepicker. | Dropdown |
Initial Date | The initial selected date for the picker. This date is used for the "Single Date" and "Only Timepicker" types. | date (optional) |
Initial Dates | The initial list of selected dates for the picker. These dates are used for the "Multiple Dates" type. | list of dates (optional) |
Dates Count Limit | This value will limit the number of selected dates for the "Multiple Dates" type. | number (optional) |
Initial Start Date | The initial start date of the range. This date is used for the "Range" type. | date (optional) |
Initial End Date | The initial end date of the range. This date is used for the "Range" type. | date (optional) |
Placeholder | This value is displayed when the picker is empty. | text (optional) |
Minimum Date | The minimum possible date to select. | date (optional) |
Maximum Date | The maximum possible date to select. | date (optional) |
Locale | Language of the calendar.
Supported languages: Czech, Danish, German, English, Spanish, Finnish, French, Hungarian, Dutch, Polish, Portuguese, Romanian, Russian, Slovak, Thai, Turkish, Ukrainian, Chinese, and Korean. | Dropdown |
Enable Custom Language | This option allows using one's definition of language. Define it in the field below. | Checkbox |
Custom Language Definition | text (optional) | |
Default View | The initial view of the calendar. | |
Auto Close | If checked, the calendar will be hidden after selecting the date. | |
Toggle Selected | If checked, then clicking on the active cell will remove the selection from it | |
Keyboard Navigation | Enables keyboard navigation.
Key combinations: Ctrl + → | ↑ — next month
Ctrl + ← | ↓ — previous monthShift + → | ↑ — next yearShift + ← | ↓ — previous yearAlt + → | ↑ — 10 years forwardAlt + ← | ↓ — 10 years backwardCtrl + Shift + ↑ — change calendar view, from dates to decadesEsc — closes the calendar | |
Show Other Months | If checked, dates from other months will be displayed in the day's view. | |
Select From Other Months | If checked, it will be possible to select dates from other months. | |
Move To Other Months | If checked, then selecting dates from another month will cause a transition to this month. | |
Vertical position | Position of the calendar relative to the plugin element | |
Horizontal Position | Position of the calendar relative to the plugin element | |
Automatically position picker | If this checkbox is checked, the picker will automatically select a vertical position depending on the available space. | |
Mobile Device Mode | If equals to "Always", then the calendar will appear as a modal window with slightly enlarged dimensions. If equals to "Auto", the plugin will detect the device type and if is the mobile device the calendar will appear as a modal window. | |
Display inline | Makes the calendar to be permanently visible. | |
Enable Timepicker | Turns on time picker | |
Time Format | The format in which the time will be displayed | |
Date Time Separator | The separator between date and time. Examples: '/', ',' '.' | |
Minimum Hours | Minimum possible hours value. Minimal possible value = 0. Maximal possible value = 24 | |
Maximum Hours | Maximum possible hours value.Minimal possible value = 0. Maximal possible value = 24 | |
Minimum Minutes | Minimum possible minutes value.Minimal possible value = 0. Maximal possible value = 59 | |
Maximum Minutes | Maximum possible minutes value.Minimal possible value = 0. Maximal possible value = 59 | |
Minutes step | Step of the minute slider | |
Hours step | Step of hours slider | |
Date Order | The order in which the date is displayed | |
Dates separator | Symbol-separator between dates in range and multiple dates modes | |
Day format | The format in which the day will be displayed | |
Month format | The format in which the month will be displayed | |
Year format | The format in which the day year be displayed | |
Custom date format | You can define your custom date format. Available tokens: T — time in milliseconds E — the short name of the day of the week EEEE — the full name of the day of the week d — day of the month dd — day of the month with leading zero M — number of the month MM — number of the month with leading zeroMMM — short name of the month MMMM — full name of the month yy — two-digit year number yyyy — full-year numberyyyy1 — the first year in the current decadeyyyy2 — the last year in the current decade | |
Show buttons | This option allows you to add action buttons to the body of the calendar. | |
Left button | Determines which button will be on the left | |
Center Button | Determines which button will be on the centered | |
Right button | Determines which button will be on the right | |
Blocked dates | List of blocked dates. Blocked dates is unavailable for selection. | |
Disable Monday | Make all Mondays unavailable for selection | |
Disable Tuesday | Make all Tuesdays unavailable for selection | |
Disable Wednesday | Make all Wednesdays unavailable for selection | |
Disable Thursday | Make all Thursdays unavailable for selection | |
Disable Friday | Make all Friday unavailable for selection | |
Disable Saturday | Make all Saturdays unavailable for selection | |
Disable Sunday | Make all Sundays unavailable for selection | |
First day of the week | By default, the week starts on Sunday. You can change this value. | |
Day Name Color | Color of weekdays in the picker | |
Highlight Color | Color of selected days in the picker | |
Placeholder Color | Color of placeholder. | |
Current Day Color | Color of the current day in the picker | |
Buttons Text Color | Color of buttons text |
Element Events
Name | Description |
value is changed | This event is triggered when selecting a date in the calendar. Depending on the element type, this event indicates that one of the following states, "selected date", "selected range", "selected multiple dates" and "selected range as list" was changed. |
view is changed | This event is triggered when the calendar view is changed. This event indicates that the "current calendar view" state was changed. |
calendar is shown | This event is triggered when the calendar appears. |
calendar is hidden | This event is triggered when closing the calendar. |
Element States
Title | Description | Type |
selected date | Returns the last selected date from the picker. This state is available for the "Single Date" and "Only Timepicker" types of elements. | date |
selected range | Returns the last selected range of dates from the picker. This state is available for the "Range" type of element. | date range |
selected multiple dates | Returns the last selected list of dates from the picker. This state is available for the "Multiple Dates" type of element. | list of dates |
current calendar view | Returns the current view of the calendar. | text |
calendar is visible | Indicates if the picker calendar is visible. | yes/no |
selected range as list | Returns the last selected range of dates from the picker in the list of dates format. This state is available for the "Range" type of element. | list of dates |
picker ID | Returns the ID of the element. | text |
Air Date/Time Picker: Actions Show picker
Shows calendar.
Hide picker
Hide calendar.
Change view
Sets the new value of the calendar view.
Field | Description |
New View | Type of calendar view |
Clear selected dates
Clears all selected dates and resets all states
Next
Goes to the next month/year/decade.
Prev
Goes to the prev month/year/decade.
Changelogs
Update: 04/12/2021 – Version 3.3.0
- added - Updated description
Update: 04/21/2021 – Version 3.4.0
- fixed - Fixed fatal error
Update: 05/14/2021 - Version 3.5.0
- added - For Hours: added the possibility to set data dynamic
Update 05/26/2021 - Version 3.6.0
- fixed - Fixed error that appears when the "Automatically position Date/Time Picker" option was selected
Update 06/09/2021 - Version 3.7.0
- fixed - Font-weight display was fixed
Update 06/20/2022 - Version 3.8.0
- added - Updated icon
- fixed - Fixed "Hovered" and "Pressed" states issue
Update 08/05/2021 - Version 3.10.0
- added - Dynamic value with the placeholder text
Update 08/09/2021 - Version 3.11.0
- fixed - Fixed custom state "Blocked day"
Update 08/15/2021 - Version 3.12.0
- fixed - Fixed custom state "Change day"
Update 09/13/2021 - Version 3.13.0
- added - Added more detailed description for some fields
Update 09/22/2021 - Version 3.14.0
- fixed - "Blur" no longer blocks the appearance of the navigation menu
Update 11/04/2021 - Version 3.15.0
- fixed - Fixed error in the "Reset" action
Update 11/22/2021 - Version 3.16.0
- fixed - Fixed the returned value for non-inline elements
Update 11/28/2021 - Version 3.17.0
- added - Added the possibility to customize the thumb of time in the popup element
Update 12/14/2021 - Version 3.18.0
- fixed - Fixed value returned by the element
Update 01/25/2022 - Version 3.19.0
- fixed - Fixed minor styling bugs
Update 03/18/2022 - Version 3.20.0
- added - Added: new time formats; header bug workaround
Update 04/12/2022 - Version 3.21.0
- added - Changed the icon
Update 04/15/2022 - Version 3.22.0
- improved - Added a new plugin element (2) with the latest library version and new features
Update 04/19/2022 - Version 3.23.0
- fixed - Fixed: zIndex and "Multiple dates" error
Update 04/25/2022 - Version 3.24.0
- added - Added Pudding support
- fixed - Fixed issue with conditions
Update 05/07/2022 - Version 3.25.0
- added - Updated icon
Update 06/06/2022 - Version 3.26.0
- added - Added the Korean language
- added - Added custom date field
- added - Added ability to set custom colours to almost all plugin properties
Update 06/22/2022 - Version 3.27.0
- added - Ability to use a custom language
- added - Ability to limit picked dates in the "Multiple dates" type ("Multiple dates limit" field)
Update 06/27/2022 - Version 3.28.0
- added - you cannot select a range if it contains blocked dates
Update 07/07/2022 - Version 3.29.0
- fixed - Fixed picker layers on the mobile view
Update 07/22/2022 - Version 3.30.0
- added action “set date” and option “disabled dates styles”
Update 2/08/2022 - Version: 3.32.0
- fixed: minor fixes
Update 08/09/2022 - Version 3.33.0
- Added fields "Initial range start date" & "Initial range end date”
Update 08/15/2022 - Version 3.34.0
- Fixed range type
Update 25/08/2022 - Version: 3.35.0.
- Fixed range when blocking the day
Update 02/09/2022 - Version: 3.36.0
- minor fixes
Update 15/09/2022 - Version: 3.37.0
- Adapted to the new responsive engine.
Update 20/10/2022 - Version 3.38.0
- Display calendar on mobile Fixed
Update 27/10/2022 - Version 3.39.0
- Fixed: button "Clear" translation, autoclose when selecting a date, AM/PM parameters, plugin element conditions.
Update 10/01/2023 - Version 3.46.0
- Fixed time in action "Set Date”
Update 09/03/2023 - Version 3.48.0
- Added a field "Minimum view”
Update 15/03/2023 - Version 3.51.0
- Fixed custom language.
Update 20/03/2023 - Version 3.52.0
- Added fields "Start range" and "End range" to action "Set date”
Update 19/04/2023 - Version 3.53.0
- Added "Disable Picker" checkbox
Update 21/04/2023 - Version 3.54.0
- Fixed the "Custom language" field
Update 2/05/2023 - Version 3.55.0
- Added "TimeZone Dynamic" field
Update 10/05/23 - Version 3.56.0
- Fixed the "Today" button
Update 1/06/23 - Version 3.57.0
- Fixed inline mode color
Update 13/06/23 - Version 3.58.0
- Change min/max hour/min to a dynamic value
Update 19/06/23 - Version 3.59.0
- Added list of dates option in the multiple dates.
Update 18/07/23 - Version 3.63.0
- Fixed "Value change" trigger
Update 23/08/23 - Version 3.67.0
- fixed Auto-binding and "OK button" (empty state)
Update 15/09/23 - Version 3.69.0
- Fixed placeholder in Repeating Group
Update 19/09/23 - Version 3.71.0
- Fixed "Disabled picker”
Update 27/09/23 - Version 3.72.0
- Fixed "Value change" trigger event.
Update 13/10/23 - Version 3.73.0
- Internal update
Update 14/11/23 - Version 3.77.0
- Fixed auto-binding
Update 14/11/23 - Version 3.78.0
- Fixed first selected date.
Update 23.01.24 - Version 3.79.0
- Fixed Blocked Day in Range.
Update 24.01.24 - Version 3.80.0
- Fixed "Set Date " action error.
Update 06.02.24 - Version 3.82.0
- Fixed Disabled (days) in week.
Update 22.02.24 - Version 3.84.0
- Code optimization
Update 12.03.24 - Version 3.86.0
- Fixed Timezone feature and the element interaction.
- Fixed "Keyboard Navidation" option.
- Fixed empty picker on initialization with values.
- Added states refresh on every update call.
- Fixed algorithm for Timezone time calculation.
- Fixed "Auto Close" option.
- Fixed interaction between "Auto Close" option and "OK" button.
- Added mention about dependention between "Auto Close" option and "OK button".
- Fixed selecting event.
- Fixed "Range" type Picker when start and end of range are the same date.
- Fixed interaction between "Range" type and "Today" button.
- Fixed dependention between "Blocked dates" and Timezone differences.
- Fixed "Disable picker" option for using in Conditional tab.
- Added cursor changing display depends on "Disable picker" option.
- Fixed reset of Picker to initial values.
Update 19.03.24 - Version 3.87.0
- Fixed recursive trigger of value changing.
Update 03.04.24 - Version 3.88.0
- Fixed "Value change" event; "Reset", "Clear" actions; Blocked & Initial Dates fields; styles; console errors.
- Fixed interaction between "Auto Close" option and buttons.
- Fixed interaction between "Toggle Selected" option and buttons.
- Fixed "Value change" event trigger on interaction between "Auto Close" option and buttons.
- Fixed "Value change" event trigger on interaction between "Toggle Selected" option and buttons.
- Removed "Value change" event trigger on initial element loading on page.
- Removed "Value change" event trigger on "Reset" action.
- Fixed "Reset" action.
- Fixed "Clear" action for "Multiple Dates" and "Range" types.
- Fixed and improved "Blocked dates" feature.
- Fixed insertion of initial dates in the picker through the Initial Dates fields.
- Fixed the alignment of content.
- Fixed the color assignment for content.
- Fixed the font style assignment for content.
- Fixed the font size assignment for content.
- Fixed the size changes of element.
- Fixed errors from console and Debugger.
Update 11.04.24 - Version 3.89.0
- Fixed initialization of states on the initial element load.
Update 12.04.24 - Version 3.90.0
- Fixed Popper error.