Air Date/Time Picker
Link to plugin page: https://zeroqode.com/version-live/plugin/air-datetime-picker-plugin-for-bubble--1617614610872x426441236739649540
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. 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 [url=https://forum.bubble.is/t/new-plugin-air-date-time-picker/14328 ][color=#40AACF]thread[/color][/url] for more details about the updates
Simple place plugin element on the page
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 month Shift + → | ↑ — next year Shift + ← | ↓ — previous year Alt + → | ↑ — 10 years forward Alt + ← | ↓ — 10 years backward Ctrl + Shift + ↑ — change calendar view, from dates to decades Esc — closes the calendar |
Show Other Months | If checked, dates from other months will be displayed in the days 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 be causing 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 is "Always", then the calendar will appear as a modal window with slightly enlarged dimensions. If is "Auto" 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 | Format in which the time will be displayed |
Date Time Separator | 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 | Format in which the day will be displayed |
Month format | Format in which the month will be displayed |
Year format | 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 zero MMM — short name of the month MMMM — full name of the month yy — two-digit year number yyyy — full-year number yyyy1 — the first year in the current decade yyyy2 — 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 |
Shows calendar.
Hide calendar.
Sets the new value of the calendar view.
Field | Description |
New View | Type of calendar view |
Clears all selected dates and resets all states
Goes to the next month/year/decade.
Goes to the prev month/year/decade.
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 - 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. |
