38min

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

How to setup

Simple place plugin element on the page

Document image



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.

Document image



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



Air Date/Time Picker v2: Actions

Show picker

Shows calendar.

Document image

Hide picker

Hide calendar.

Document image

Change view

Sets the new value of the calendar view.

Document image

Field

Description

New View

Type of calendar view

months
months
days
days
years
years



Clear selected dates

Clears all selected dates and resets all states

Document image



Next

Goes to the next month/year/decade.

Document image

Prev

Goes to the prev month/year/decade.

Document image

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
Update: 04/21/2021 – Version 3.4.0
Fixed
Update: 05/14/2021 - Version 3.5.0
Added
Update 05/26/2021 - Version 3.6.0
Fixed
Update 06/09/2021 - Version 3.7.0
Fixed
Update 06/20/2022 - Version 3.8.0
Added
Fixed
Update 08/05/2021 - Version 3.10.0
Added
Update 08/09/2021 - Version 3.11.0
Fixed
Update 08/15/2021 - Version 3.12.0
Fixed
Update 09/13/2021 - Version 3.13.0
Added
Update 09/22/2021 - Version 3.14.0
Fixed
Update 11/04/2021 - Version 3.15.0
Fixed
Update 11/22/2021 - Version 3.16.0
Fixed
Update 11/28/2021 - Version 3.17.0
Added
Update 12/14/2021 - Version 3.18.0
Fixed
Update 01/25/2022 - Version 3.19.0
Fixed
Update 03/18/2022 - Version 3.20.0
Added
Update 04/12/2022 - Version 3.21.0
Added
Update 04/15/2022 - Version 3.22.0
Improved
Update 04/19/2022 - Version 3.23.0
Fixed
Update 04/25/2022 - Version 3.24.0
Added
Fixed
Update 05/07/2022 - Version 3.25.0
Added
Update 06/06/2022 - Version 3.26.0
Added
Added
Added
Update 06/22/2022 - Version 3.27.0
Added
Added
Update 06/27/2022 - Version 3.28.0
Added



Demo to preview the plugin: