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
Simple place plugin element on the page
Plugin Elements
Air Date/Time Picker v2: Fields
The plugin contains an Air Date/Time Picker v2 visual element that should be used on a page.
Title | Description |
Type | Determines the type of dates with which the picker will work |
Initial Date in "Single Date" | Initially selected date if "Type" is "Single Date" |
Initial Dates in "Multiple Dates" | Initially selected dates if "Type" is "Multiple Dates" |
Initial Dates in "Range" | Initially selected dates to the range if "Type" is "Range" |
Placeholder | Placeholder value. If this field is empty, the current date and time will be used as a placeholder. |
Minimum Date | The minimum possible date to select |
Maximum Date | The maximum possible date to select. |
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 |
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 |
Air Date/Time Picker v2: 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.
Air Date/Time Picker v2: Exposed states
Plugin States are part of plugins that are exposed values of the plugin.
Name | Description | Type |
Selected date | Selected single date | Date |
Selected range | Selected dates range | Date Range |
Selected range as list | Selected dates range as a list of dates | List of Dates |
Selected multiple dates | Selected multiple dates | List of Dates |
Current view | Current picker view | Text |
Is Visible | Is the piker visible | Yes/No |
Element Events
Element events - are events that are part of the plugin element.
Name | Description |
Value change | An event that is triggered when selecting a date. |
View change | When changing the view, for example, from days to months, this event will be triggered. |
Show | Triggered when the calendar appears. |
Hide | Triggered when closing the calendar. |
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