🔗
Demo to preview the settings
🔗
Introduction
The Air Date/Time Picker Pro is an advanced version of our renowned Air Date/Time Picker plugin, designed to bring a new level of complexity, flexibility, and optimization to your date and time selection needs. It works in all modern browsers: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Key Features:
- Optimized Performance: Enjoy fluid interactions and reduced loading times, enhancing user satisfaction without sacrificing efficiency.
- Animations Support: Integrate animations to make the date and time selection process interactive and visually appealing.
- Time Zone Compatibility: Ideal for applications with a global audience, ensuring accurate date and time selections across various time zones.
- Dynamic Picker Types: Flexibly switch between single-day, range, and multiple-day picker types, catering to diverse user scenarios.
- Dynamic Titles and Additional States: Offer personalized experiences with dynamic titles and leverage additional states for improved usability.
- Mobile Mode: Ensure your application is mobile-friendly with a responsive design that adapts to various screen sizes.
- Calendar Visibility Options: Control the visibility of the calendar for a cleaner, more focused user interface.
- Month Navigation: Allow users to easily show, select, or move to another month with intuitive controls.
- Time and Hour Format Customization: Cater to regional preferences by adjusting the time and hour format.
- Calendar Positioning: Place the calendar within your interface in a way that best fits your design and user flow.
- Color Style Customization: Match the picker's color scheme with your application's branding for a cohesive look.
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 Pro input form which can be used on a page.
Air Date/Time Picker PRO
Element Fields
Title | Description | Type |
Type | Determines the type of dates with which the picker will work.
☝️Available types: Single Day, Multiple Day, Range, and Time Picker.
👉Check more details here. | Dropdown |
Initial Date | The initial selected date for the picker.
⚠️This date is used for the "Single Day" and "Time Picker" types. | date (optional) |
Initial Dates | The initial list of selected dates for the picker.
⚠️These dates are used for the "Multiple Day" type. | list of dates (optional) |
Dates Count Limit | This value will limit the number of selected dates for the "Multiple Day" 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) |
Max Range Length | This value will limit the number of selected dates for the "Range" type. | number (optional) |
Placeholder | This value is displayed when the picker is empty. | text (optional) |
Placeholder Color | Color of placeholder. | Color |
Position | Position of the calendar when opened relative to the plugin element.
☝️Available positions: Bottom, Top, Left, Right, Auto.
👉Check more details here. | Dropdown |
Mobile Style | If checked, the calendar will appear as a modal window with slightly enlarged dimensions only on mobile devices. | Checkbox |
View | The initial representation of the calendar.
☝️Available views: Days, Months, Years.
👉Check more details here. | Dropdown |
Min View | The minimum possible representation of the calendar.
⚠️"Min View" can't be less than the "View".
☝️Available views: Days, Months, Years.
👉Check more details here. | Dropdown |
Min Date | The minimum possible date to select. | date (optional) |
Max Date | The maximum possible date to select. | date (optional) |
First Day Of Week | The index of the day on which the week starts. Possible values from 1 (Monday) to 7 (Sunday).
👉Check more details here. | Dropdown |
Today Date Color | Color of the today in the calendar. | Color |
Highlight Color | Color of the selected cells in the calendar. | Color |
Weekdays' Names Color | Color of weekdays' names in the calendar. | Color |
Show Other Months | If checked, dates from other months will be displayed in the “days” view. | Checkbox |
Select From Other Months | If checked, it will be possible to select dates from other months. | Checkbox |
Move To Other Months | If checked, then selecting dates from another month will be causing transition to this month. | Checkbox |
Language | Language of the calendar.
☝️Supported languages: Korean, Chinese, Ukrainian, Turkish, Thai, Slovak, Russian, Romanian, Portuguese, Polish, Dutch, Hungarian, French, Finnish, Spanish, English, German, Danish, and Czech. | Dropdown |
Keyboard Navigation | Checkbox | |
Auto Close | If checked, the calendar will be hidden after selecting the date. | Checkbox |
Auto Close On Scroll | If checked, the calendar will be hidden after scrolling the page. | Checkbox |
Display Calendar Always | Makes the calendar permanently visible. | Checkbox |
Open On Load | If checked, the calendar is open on an initial load on the page. It is ignored if the "Display Calendar Always" field is also checked. | Checkbox |
Animation | Enables the animation for the calendar on open. It is ignored if the "Display Calendar Always" field is also checked. | Checkbox |
Animation Type | The animation type for the calendar on open. | Dropdown |
Date Format | text | |
Time Format | text | |
Dates Separator | Symbol-separator between dates for the "Range" and "Multiple Dates" types. | text |
Date Time Separator | Separator between date and time.
📝 Examples: '/', ',' '.' | text |
Timepicker | Enables hour and minute selection. | Checkbox |
Min Hours | Minimum possible hours value.
☝️Min: 0,
☝️Max: 24. | number |
Max Hours | Maximum possible hours value.
☝️Min: 0,
☝️Max: 24. | number |
Hours Step | Step of the hour slider. | number |
Min Minutes | Minimum possible minutes value.
☝️Min: 0,
☝️Max: 59. | number |
Max Minutes | Maximum possible minutes value.
☝️Min: 0,
☝️Max: 59. | number |
Minutes Step | Step of the minute slider. | number |
Blocked Dates Style | The style for the blocked dates. | Dropdown |
Blocked Dates | Blocked dates are unavailable for selection. | list of dates (optional) |
Blocked Weekdays | The indexes of the weekdays that will be blocked for selection. Possible values from 1 (Monday) to 7 (Sunday). | text |
Left Button | Determines which button will be on the left side.
☝️Available buttons: Ok button, Clear button, Today button. | Dropdown (optional) |
Center Button | Determines which button will be on the center side.
☝️Available buttons: Ok button, Clear button, Today button. | Dropdown (optional) |
Right Button | Determines which button will be on the right side.
☝️Available buttons: Ok button, Clear button, Today button. | Dropdown (optional) |
Buttons Text Color | Color of buttons' text. | Color |
Timezone | Timezone of picker. | Dropdown |
Padding Vertical | The value for the top and bottom padding. | number |
Padding Horizontal | The value for the left and right padding. | number |
Disable Picker | Disables interaction with the element. | Checkbox |
Element Actions
Clear - This action is used to clear selected dates and reset all states.
Fields:
Title | Description | Type |
Without Trigger Event | If checked, the "value is changed" event will not be triggered. | Checkbox |
Show Picker - This action is used to open the picker calendar.
Close Picker - This action is used to close the picker calendar.
Set Date - This action is used to set the date in the picker.
Fields:
Title | Description | Type |
Date | The date for the picker.
⚠️This date is used for the "Single Day" and "Time Picker" types. | date (optional) |
Dates | The list of dates for the picker.
⚠️These dates are used for the "Multiple Day" type. | list of dates (optional) |
Start Date | The start date of the range.
⚠️This date is used for the "Range" type. | date (optional) |
End Date | The end date of the range.
⚠️This date is used for the "Range" type. | date (optional) |
Without Trigger Event | If checked, the "value is changed" event will not be triggered. | Checkbox |
Change Picker Type - This action is used to change the initial type of the picker.
Fields:
Title | Description | Type |
Type | Determines the type of dates with which the picker will work.
☝️Available types: Single Day, Multiple Day, Range, and Time Picker.
👉Check more details here. | Dropdown |
Previous - This action is used to go to the previous month/year/decade.
Next - This action is used to go to the next month/year/decade.
Change View - This action is used to change the representation of the picker calendar.
Fields:
Title | Description | Type |
View | New representation of the calendar.
☝️Available views: Days, Months, Years.
👉Check more details here. | Dropdown |
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. |
calendar is shown | This event is triggered when the calendar appears. |
calendar is hidden | This event is triggered when closing the calendar. |
view is changed | This event is triggered when the calendar view is changed. This event indicates that the "current calendar view" state was changed. |
Element States
Name | Description | Type |
selected date | Returns the last selected date from the picker.
⚠️This state is available for the "Single Day" and "Time Picker" types of elements. | date |
selected multiple dates | Returns the last selected list of dates from the picker.
⚠️This state is available for the "Multiple Day" type of element. | list of dates |
selected range | Returns the last selected range of dates from the picker.
⚠️This state is available for the "Range" type of element. | date range |
current calendar view | Returns the current view of the calendar. | text |
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 |
calendar is visible | Indicates if the picker calendar is visible. | yes/no |
multiple days count | Returns the count of selected dates.
⚠️This state is available for the "Multiple Day" type of element. | number |
range days count | Returns the count of selected dates.
⚠️This state is available for the "Range" type of element. | number |
Helpful details
Calendar views
All available views of the calendar are presented.
- Days - In this view, all days of the month are displayed.
- Months - In this view, all months of the year are displayed.
- Years - In this view, the years of one decade are displayed.
Key combinations for navigation
There are presented all available key combinations for navigation in the calendar when the "Keyboard Navigation" is enabled.
Ctrl + → | ↑
— change to next month.Ctrl + ← | ↓
— change to previous month.Shift + → | ↑
— change to next year.Shift + ← | ↓
— change to previous year.Alt + → | ↑
— change to 10 years forward.Alt + ← | ↓
— change to 10 years backward.Ctrl + Shift + ↑
— change calendar view, from dates to decades.Esc
— closes calendar.Calendar positions
All available positions for the calendar are presented.
- Bottom - The calendar will always be open at the bottom side.
- Top - The calendar will always be open at the top side.
- Left - The calendar will always be open on the left side.
- Right - The calendar will always be open on the right side.
- Auto - The calendar will be open depending on the free space around the element.
First Day Of Week notation
To set up the “First Day Of Week” field you need to know the following indexes of the week.
1
— Monday2
— Tuesday3
— Wednesday4
— Thursday5
— Friday6
— Saturday7
— SundayDate Format
There are presented all available tokens for date formatting.
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.Example | Result |
T | 1720558800000 |
M/d/yy | 7/10/24 |
MM/d/yy | 07/10/24 |
dd.MM.yyyy | 10.07.2024 |
E MMM dd yyyy | Wed Jul 10 2024 |
dd MMMM yyyy, EEEE | 10 July 2024, Wednesday |
Time Format
There are presented all available tokens for time formatting.
h
— hours in 12-hour mode.hh
— hours in 12-hour mode with leading zero.H
— hours in 24-hour.HH
— hours in 24-hour mode with leading zero.m
— minutes.mm
— minutes with leading zero.aa
— day period lowercase.AA
— day period uppercase.Example | Result |
HH:mm | 06:08 |
H:mm | 6:08 |
hh:mm aa | 06:08 pm |
h:m aa | 6:8 pm |
hh:mm AA | 06:08 PM |
h:m AA | 6:8 PM |
Calendar Buttons
The plugin element allows the addition of up to 3 action buttons in the calendar.
The order of buttons can be set up in the “Calendar Buttons” section.
What buttons do
Clear
— removes the selected value from the element.Today
— selects today's date in the element.OK
— refreshes the element states and triggers the “value is changed” event."Clear" button dependencies
- If the "OK" button is also selected in the calendar, then clicking on the "Clear" button will clear the selected value ONLY from the element but will NOT clear the selected value from the element states. Click on the “OK” button to remove values from states!
- If the "OK" button is NOT selected in the calendar and the "Auto Close" field is checked, then clicking on the "Clear" button will close the calendar.
“Today” button dependencies
- If the “OK” button is also selected in the calendar, then clicking on the "Today" button will select today’s date ONLY in the element but will NOT change the element states. Click on the “OK” button to change values from states!
- If the "OK" button is NOT selected in the calendar and the "Auto Close" field is checked, then clicking on the "Today" button will close the calendar.
“OK” button dependencies
- If the “OK” button is selected in the calendar, then the checked “Auto Close” field will be ignored.
- When the “OK” button is clicked, then the element states are refreshed, the “value is changed” event is triggered and the calendar is hidden.
- While any date is selected in the calendar and the "OK" button is NOT clicked, then the element states are NOT refreshed, the "value is changed" event is NOT triggered and the calendar remains open.
Element types & states
The plugin element has 4 types. Each type allows the selection of a specific date type from the calendar. The different types will refresh the values from certain states.
- Single Day type — allows the selection of a single date.
👉
Refreshing states: Selected value will be reflected in the
selected date
state!- Multiple Day type — allows the selection of a list of dates.
👉
Refreshing states: Selected values will be reflected in the
selected multiple dates
and multiple days count
states!- Range type — allows the selection of a range of dates.
👉
Refreshing states: Selected values will be reflected in the
selected range
, selected range as list
, and range days count
states!- Time Picker type — allows only the selection of time.
👉
Refreshing states: Selected time will be reflected in the
selected date
state!Workflow example
How to fix Recursion/Circular reference error
Problem
Sometimes you can get one of the following errors, Error: Recursion when evaluating property… or Error: Property contains circular reference…
Error: Recursion when evaluating property…
Error: Property contains circular reference…
Reason of problem
The reason for both errors is the same, using the own element state in its condition in the Conditional tab.
Solution
- Create a Custom state for any element.
- Set up the value for the created Custom state. Set-up steps can differ depending on element state change behavior.
- For some states, it is possible to use the element events. And, call Set state action.
- For some states, you can't detect changes based on element events. Use default Bubble tools and call Set state action!
- Use created Custom state in condition instead of own element state.
How to block the days of the week
Similar to the “First Day Of Week” field, the “Blocked Weekdays” field uses day indexes. Check details here.
An example is how to block any day of the week is presented.
- On the page, it is placed a plugin element.
- For the plugin element, is created a custom state. The “blockedDays” state will contain blocked days of the week as indexes.
- For the plugin element, the “blockedDays” state is used for the “Blocked Weekdays” field.
- On the page, are placed 7 “Checkbox” elements that represent all days of the week.
- In the “Workflow” tab, every “Checkbox” element has defined the “value is changed” event with 2 “Set state” actions. These actions change the value for the “blockedDays” state.
- The first “Set state” action will append an index for a certain day of the week when the "Checkbox" will be checked.
- The second “Set state” action will remove an index for a certain day of the week when the "Checkbox" will be unchecked.
- Finally, on preview, the checked days of the week are disabled for selection from the calendar.
Using the Timezone feature
A simple example of using the timezone feature is presented.
Let's imagine we have an international app for booking something in New York. Our users will be able to book something from any country.
Setup
- On the page, it is placed a plugin element.
- The date and time format were customized through the "Date Format" and “Time Format” fields. Check more details here and here.
- The “Timepicker” was also enabled.
- The “Blocked Dates” field was used to disable some dates from selection.
In the database, we have prepared some examples for the “Blocked Dates” field.
- Additionally, the “OK” button from the “Calendar Buttons” section was enabled to prevent excessive database changes.
- Finally, for the “Timezone” field was selected “America/New_York” value.
☝
The “America/New_York” value was selected because we are looking to book something in New York.
- For convenience, the selected value is displayed in a “Text” element.
- When the “value is changed” event is triggered, the selected value from the “selected date” state will be registered in the database using the “Make changes to thing...” action.
How will it look for a user from the “Europe/Athens” time zone
Imagine a user from the "Europe/Athens" time zone will book something.
- Here is the initial date before selection.
- The user selects any date and time in the plugin element. Imagine that the user booked something on Jul 22, 2024, 6:00 pm, this is local time in New York.
It is possible to notice that the “selected date” state has a different time.
The value from the “selected date” state also is saved in the database.
🙏
Don’t worry that the value from the “selected date” state doesn’t match with the real-time in New York now.
💡
When another user from the “America/New York” time zone opens the app, Bubble automatically will adapt all dates from the database to the “America/New York” time zone.
☝
The plugin element calculates the time zone difference between the current time zone of the user and the selected time zone from the “Timezone” field. The calculation is done with the mention that Bubble automatically will adapt the saved date from the database.
How will it look for a user from the “America/New York” time zone
Imagine a user from the "America/New York" time zone will book something.
- From the previous section, we know a user from the “Europe/Athens” time zone selected Jul 22, 2024, 6:00 pm (local time in New York) but in the database was saved Jul 23, 2024, 1:00 am. Let’s check the value in the database for a user from the “America/New York” time zone now.
☝
Notice that Bubble automatically converted Jul 23, 2024, 1:00 am into Jul 22, 2024, 6:00 pm.
- Additionally, when users open the calendar, the Jul 22nd is blocked for selection.
- The user selects any date and time in the plugin element. Imagine that the user booked something on Jul 10, 2024, 7:00 am, this is local time in New York.
It is possible to notice that the “selected date” state has the same time.
⚠️
The saved value in the database for the “America/New York” time zone will automatically converted for other users from other time zones by Bubble.
💡
It is recommended to use the list of booked dates in the “Blocked Dates” field of the plugin element.
How to change the type of element dynamically
The plugin element allows to change the type of element dynamically.
Change through the Conditionals
- On the page, it is placed a plugin element with default settings.
- For this method, an additional custom state is necessary.
💡
For convenience, the custom state was created for the plugin element. Generally, it can be added for any element on the page.
☝
For this use case, all element types will be encoded through the number:
1
— Single Day
2
— Multiple Day
3
— Range
4
— Time Picker- According to the above encoding info, the following “Conditionals” are defined for the plugin element.
- To change the custom state value, the following “Button” elements are placed on the page.
- When the “Button” elements are clicked, the “Set state of an element” action is used to change the custom state value according to encoding info.
- On preview, the calendar will accept date selection according to the selected element type. Please check more details here.
Change through the “Change Picker Type” element action
- On the page, it is placed a plugin element with default settings.
- To change the plugin element type, the following “Button” elements are placed on the page.
- When the “Button” elements are clicked, the “Change Picker Type…” element action is used to change the element type.
- On preview, the calendar will accept date selection according to the selected element type. Please check more details here.
Changelog
Update 25.09.24 - Version 1.13.0
- Fixed blocked dates style.
Update 14.08.24 - Version 1.12.0
- Improved documentation.
Update 07.06.24 - Version 1.9.0
- Fixed bugs and optimized code.
- Fixed Autobinding reset to 1st Jan 1970.
- Fixed element paddings.
- Fixed state refresh on selection of one date for "Range" type.
- Code optimization.
- Fixed bugs.
Update 26.04.24 - Version 1.7.0
- Major fix.
- Fixed empty picker on initialization with values.
- Fixed initial values assignation.
- Fixed algorithm for Timezone time calculation.
- Fixed blocked dates.
- Fixed "Disable picker" option for using in Conditional tab.
- Added cursor changing display depends on "Disable picker" option.
- Fixed trigger of "Value change" event.
- Fixed reset action.
- Fixed and improved the change of type of element.
- Fixed interaction between Auto Close and picker buttons.
- Fixed Clear picker button.
- Fixed element style refresh.
- Fixed Clear action.
- Changed the import of libraries.
- Fixed blocking of days of week.
- Fixed picker positions.
- Fixed placeholder value.
- Fixed initial values Range type.
- Fixed refresh of states.
Update 02.04.24 - Version 1.6.0
- Fixed interaction between "Auto Close" option and buttons.
Update 27.02.24 - Version 1.5.0
- Added "Keyboard Navigation" field & fixed "Date Format" documentation.
Update 19.02.24 - Version 1.1.0
- Added "Close on Scroll" option.
Update 13.02.24 - Version 1.0.0
- Plugin release.