Air Date_Time Dropper

✅

Link to the plugin page: https://zeroqode.com/plugin/1617872156422x636581185562141300

Demo to preview the plugin:

✅

Live Demo: https://seanhootsdemopro.bubbleapps.io/demo_datetime_dropper

✅

Bubble Editor: https://bubble.io/page?version=live&id=seanhootsdemopro&name=demo_datetime_dropper&tab=Design&type=page

Introduction

Enhance your Bubble app’s UI with Date and Time pickers. Choose either or both elements: Air Date Dropper and Air Time Dropper. Add them to the editor and customize their properties.

For more information, please visit the following forum thread:

https://forum.bubble.io/t/new-plugin-beautiful-date-time-droppers/14719/

👛 Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.

How to setup

Add the Elements

Drag and drop the desired element(s) from the plugin:

Air DateDropper: Use this element for date selection.
Air TimeDropper: Use this element for time selection.

Place the elements in your app and customize their appearance and properties as needed.

Set Up Events

Use the following events to trigger actions when the date or time is changed:

A Air DateDropper Date Is Changed: This event is triggered whenever the selected date is updated.
A Air TimeDropper Time Is Changed: This event is triggered whenever the selected time is updated.

Use Actions

The plugin provides actions to reset the date or time of the elements programmatically:

Reset Date A Air DateDropper: Resets the selected date in the Air DateDropper element.
Reset Time A Air TimeDropper: Resets the selected time in the Air TimeDropper element.

Customize Properties

Open the property editor for each element to configure its settings, such as initial date/time, styles, and other appearance options.

Plugin Element Properties

Air DateDropper

Fields:

Title	Description	Type
Theme	Select a theme to apply to the date picker. Available options: bluewhite, red, lightgreen, crimson, gold, deepsky	Dropdown
Placeholder	Placeholder text	Text (optional)
	If “Set initial date is checked” the datepicker will display the initial set date instead of the placeholder text. If not checked the initial date is null and the placeholder text will be displayed.
Set initial date	This option changes the input value automatically, by default. Set to false to prevent it.	Checkbox (yes/no)
Initial date	This option offers the possibility to set a starting date. Please note that you must follow this specific format (mm-dd-yyyy) to allow the matching to recognize month, day and year.	Date (optional)
Disabled dates	This option offers the possibility to set a string of disabled days. So, separate all days by comma and the picker will convert them into an array. Please note that you must follow this specific format (mm/dd/yyyy) to allow the matching to recognize month, day and year.	Date (optional)
Date format	The date format the picker will write on the selected input. Available options: 22/06/1983, 06/22/1983, 22-06-1983, 06-22-1983, 22 June 1983, 22 Jun 1983, Wednesday 22 June 1983, Jun (month only), 1983 (year only)	Dropdown
Animation	If set to true, the picker will run an initial state animation and all user changes are animated.	Checkbox (yes/no)
Disable animation on mobile	Animations could be very slow on some older smartphones. To prevent this, set this option to false to disable animations on any mobile viewport.	Checkbox (yes/no)
Language	Display Language to use for Month name and Day-of-week. Available options: Arabic, Italian, Hungarian, Greek, English, Espanol, Dansk, Deutch, Dutch, Francais, Polski, Portuguese, Slovenian, Ukrainian, Russian, Turkish, Korean	Dropdown
Show large mode on click of day.	This option enables to switch the size of the picker by clicking on the icon at the bottom or clicking on the day block.	Checkbox (yes/no)
Show large view by default	If is checked, this option shows the large view by default.	Checkbox (yes/no)
	Use lock to allow selecting dates only to/from initial date. False will not lock any dates
Lock	This option sets the date limit based on the assigned variable. If you set to “from”, you can’t select a date earlier than the current date. Opposed to this behavior, if it’s set to “to”, you can not select a date after the current date. Available options: false, to, from	Dropdown
Minimum year	The lowest year that the control will allow.	Text
Maximum year	The highest year that the control will allow.	Text
Translate mode	Enable translation mode	Checkbox (yes/no)

Element Actions

Reset Date - Resets the date and time picker to its default or initial state, clearing any selected value and restoring the placeholder if applicable

Exposed states

Title	Description	Type
Value	Returns the currently selected date by the picker.	Text
Date value	Current selected date as a date/time object.	Date

Element Events

Element event: AirDateDropper is changed.

Title	Description
Date is changed	Triggered whenever the user selects a new date or time in the picker, updating the associated value.

Air TimeDropper

Fields:

Title	Description	Type
Time format	A time format string to be used to display in the timeDropper Available options: 3:09 pm, 3:09 PM, 15:09, 3:9 pm, 3:9 PM, 03:09 AM	Dropdown
Initial time	Specifies the default time to be displayed in the timeDropper when the element is first loaded.	Date (optional)
Minute step	Permitted values: 1, 5, 10, 15, 20, 25, 30 Available options: 1, 5, 10, 15, 20, 25, 30	Number (optional)
Auto-switch between hour and minute selectors	Will automatically switch between hour and minute handles	Checkbox (yes/no)
Use 24hr clock	If checked will use 24hr clock	Checkbox (yes/no)
Enables time change using mousewheel	Enables time change using mousewheel	Checkbox (yes/no)
Set current time	Automatically set current time by default.	Checkbox (yes/no)
Initial animation	Animation Style to use when showing timedropper. Available options: fadein, fadeout, dropdown	Dropdown
Accent color	Specify a color value for drop down accent color. Default: #1977CC	Color (optional)
Border color	Specify a color value for drop down border color. Default: #1977CC	Color (optional)
Background color	Specify a color value for drop down background color. Default: #FFFFFF	Color (optional)
Text color	Specify a color value for drop down text color. Default: #555	Color (optional)

Element Actions

Reset Time - Resets the time picker to its default or initial state, clearing any selected time and restoring the placeholder if applicable.

Exposed states

Title	Description	Type
Value	Current selected time as text	Text
Minutes	Current selected minutes as number	Number
Hours	Current selected hours as number	Number
Date value	Current selected time as a date/time object. Since this is a time picker the date component is irrelevant. All dates will be set to Jan 01 1970. This will allow you to do calculations on the time like subtracting two date values.	Date

Element Events

Element event: AirTimeDropper is changed.

Title	Description
Time is changed	Triggered whenever the user selects a new time in the time picker, updating the associated value.

Changelogs

Update 21.10.24 - Version 1.42.0

Minor update (Marketing update).

Update 15.09.24 - Version 1.41.0

Minor update (Marketing update).

Update 09.09.24 - Version 1.40.0

Minor update (Marketing update).

Update 25.07.24 - Version 1.39.0

Minor update .

Update 24.06.24 - Version 1.38.0

Updated demo/service links.

Update 20.06.24 - Version 1.37.0

Changed method of library import.

Update 06.06.24 - Version 1.36.0

Minor update.

Update 10.11.23 - Version 1.35.0

styling time dropper fixed.

Update 31.10.23 - Version 1.34.0

Change show docs description for the "Disabled dates" field.

Update 19.10.23 - Version 1.33.0

Updated description.

Update 13.10.23 - Version 1.32.0

internal update.

Update 18.09.23 - Version 1.31.0

updated description.

Update 13.09.23 - Version 1.30.0

minor updates.

Update 03.08.23 - Version 1.29.0

internal updates.

Update 31.07.23 - Version 1.28.0

Fixed "Time is changed" trigger event.

Update 11.07.23 - Version 1.27.0

updated description.

Update 03.07.23 - Version 1.26.0

obfuscator code.

Update 29.06.23 - Version 1.25.0

Added new style settings for clock.

Update 19.06.23 - Version 1.24.0

Updated the description .

Update 29.05.23 - Version 1.23.0

Fixed and Updated Minute Step field.

Update 23.02.23 - Version 1.22.0

deleted the icons.

Update 22.02.23 - Version 1.21.0

updated the description.

Update 21.02.23 - Version 1.20.0

Fixed incorrect time display on the Android app.

Update 09.01.23 - Version 1.19.0

Added "date value" state.

Update 28.12.22 - Version 1.18.0

Added Reset Date & Reset Time actions.

Update 25.02.22 - Version 1.17.0

fixed error related to "disabled dates".

Update 18.11.21 - Version 1.16.0

Fixed return values for non-inline element.

Update 09.11.21 - Version 1.15.0

fixed empty values returned by plugin.

Update 31.08.21 - Version 1.14.0

fixed problems with displaying initial data from fields.

Update 26.08.21 - Version 1.13.0

fixed inversion in '24hr clock', fixed returned time value, and added new events..

Update 29.07.21 - Version 1.12.0

Added a new field "Initial time' with dynamic value.

Update 14.05.21 - Version 1.11.0

Disabled Dates now work correctly. Fixed error from plugin when the initial date is not changed.

Update 21.04.21 - Version 1.10.0

Fatal error fixed.

Update 21.04.21 - Version 1.9.0

Fatal error fixed.

Update 20.04.21 - Version 1.8.0

Fatal error fixed.

Update 18.04.21 - Version 1.7.0

Removed modal view due to library errors.

Update 16.04.21 - Version 1.6.0

Updated demo page link.

Update 15.04.21 - Version 1.5.0

Updated instructions.

Update 12.04.21 - Version 1.4.0

Updated description.

Update 27.10.18 - Version 1.3.0

Added a new state, 'date value' which returns a date object with the selected time.

Update 01.09.18 - Version 1.2.0

Cleaned up code and removed console logs.

Update 01.09.18 - Version 1.1.5

Fixed bug in time dropper sometimes not showing..

Update 08.08.18 - Version 1.1.4

Fixed bug where month was value was 1 more than selected date. Fixed bug for element not working when in a group..

Update 23.01.18 - Version 1.1.3

bug fixes and code improvements.

Update 22.01.18 - Version 1.1.2

fixed error parsing plugin code .

Update 13.01.18 - Version 1.1.1

added back translation mode.

Update 13.01.18 - Version 1.1.0

Fixed bug of datedropper not showing in some browsers. Added a minute step option to timedropper. Added placeholder to datedropper.

Update 05.12.17 - Version 1.0.1

Fixed bug with datedropper not showing.

Update 04.12.17 - Version 1.0.0

Initial public release. Fixed issue with IE and Edge.

Update 23.06.17 - Version 0.1.1

Fix french language.

Update 23.06.17 - Version 0.1.0

Added 2 states, minutes and hours, to Time dropper.

Update 22.06.17 - Version 0.0.1

First release.