Air Date-Time Picker

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
Image without caption

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.
Image without caption
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.
Image without caption

Hide picker

Hide calendar.
Image without caption

Change view

Sets the new value of the calendar view.
Image without caption
Field
Description
New View
Type of calendar view
Image without caption
Image without caption
Image without caption

Clear selected dates

Clears all selected dates and resets all states
Image without caption

Next

Goes to the next month/year/decade.
Image without caption

Prev

Goes to the prev month/year/decade.
Image without caption

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 colors 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 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.

Demo to preview the plugin:


Helpful?