šŸ—“ [FREE Plugin] Air Date/Time Picker

Hey @petter,
Yes i can do that. Fortunately for u i was just about to push a new version right now (just writing the documentation) so let me add that.

2 Likes

Thatā€™s awesome @seanhoots, thank you!

I observed another thing: If a user tries to type in a time by using the keyboard, it suddenly switches format:

Pressing number keys:

Iā€™d prefer to hide the date completely, as a user is asked for a time only (setting opening hours for a venue).

Is there a way to achieve this?

Hi @petter,
That behavior is by design from the original library that this plugin is created from.
Note that you cannot edit (type) in the input manually.
The idea is to let the user know exactly what date and time being saved when they try to edit.
But i agree that this is not user-friendly.
What iā€™m thinking of doing is to disable that feature completely so you canā€™t even see the cursor.
The only issue with this too is that when data is longer than the input box (especially when multiple dates are selected), the user wont be able to scroll through to see all the dates.

1 Like

Ah, ok, I see what you mean. Itā€™s not a big issue for me, but thought Iā€™d mention it.

Is it possible to add a ā€œThis input is disabledā€ option to this element? I have a settings page that is set to edit mode or locked mode, and it would make it easier to disable the input rather than hiding/replacing.

1 Like

Update Version 2.2.0
1) Added workflow actions

  • show datepicker - will open the datepicker. For example you can have a button beside the picker input so that on click of the button the date picker will show.

  • set date - sets the picker to the provided (dynamic) date.

2) Added event, date selected. This event is triggered when a new date is selected in the picker. Can be used to trigger workflow actions.

3) Added ability to specify custom date format.

To enable this check the field ā€œUse custom date formatā€ and then specify the format in the ā€œCustom date formatā€ field according to the following rules:

  • d- day number
  • dd- day with leading zero
  • D- short day name
  • DD- full day name
  • m- month number
  • mm- month number with leading zero
  • M- short month name
  • MM- full month name
  • yy- two digit year number
  • yyyy- four digit year number

Example:
D. M d, yyyy will produce dates like Wed. Jun 22, 1983.
dd/mm/yy will produce dates like 06/01/83
As you can see from these examples, you can format the date any way you want with any characters as separators.

4) Added ability to disable the picker.

5) Added ability to choose your own colors for the picker so that it will look consistent with your UI. Currently you can set the color for the day names and the highlight colors for selected day, month, year and the today button.

6) Fixed the bug in Internet Explorer and Edge browsers. So now the picker works in these browsers.

7) Fixed the issue with the full date displaying in the input when a user tries to edit the input.

Happy bubbling :smiley:

11 Likes

@seanhoots this seems like a bug, or at least itā€™s inconsistent with how all of Bubbleā€™s native elements act.

When I use the action ā€œgroup - reset dataā€ on the group that contains the Air Date/Time PIcker nothing happens. The native Bubble elements get reset back to whatever their data and conditions would be on page load.

Is that the intended functionality?


hey @blueback09, this behaviour isnā€™t a bug.
First of all be aware that not all native element features are available when developing plugins.
I might be wrong but to the best of my knowledge this behaviour of resetting inputs is not available to plugin developers.
@emmanuel can correct me if iā€™m wrong but this is something that has to be enabled from bubbleā€™s end.

What i may be able to do though is to create a custom reset action for the plugin.
Though i can see how this will be messy if all input elements have their own reset actions.
So it was smart from bubble to have the one reset inputs action.

Maybe @emmanuel can come in here.

1 Like

We can look into adding a way to get input to reset part of the reset action. Can you email support so that this doesnā€™t get lost? It probably wonā€™t happen overnight but hopefully within a month or so.

2 Likes

Thanks @emmanuel. Iā€™ve emailed support.

Thanks for the update @seanhoots! Already this plugin has proven itself very useful, extremely lightweight and stable! Awesome work!

1 Like

@emmanuel @seanhoots While weā€™re talking about it, the Air Date/Time Picker also doesnā€™t have a value if the page loads with the picker invisible. Thatā€™s also different from how the other elements work. Maybe that can be brought into line too.

My use case is that I have lots of groups which show/hide. The big one is hidden to save space and the little group (with a summary of whatā€™s in the big group) is visible. To keep things consistent Iā€™m using the value of the editable input in the summary in the visible group. The Air Date/Time Picker doesnā€™t have an initial value if it hasnā€™t been visible, but all of the other inputs are happy to have a value whether or not theyā€™re invisible.

1 Like

@seanhoots Is this something that has to wait on Bubble to expose more functionality to fix?

Iā€™ve been trying to figure out why a conditional doesnā€™t work and the closest Iā€™ve got is that Air date/time pickerā€™s value doesnā€™t update when the time changes. It only updates when the date changes. You can see on this page how, if you change one of the Air date/time pickerā€™s time values the text doesnā€™t update and the conditional doesnā€™t activate. But if you change one of the Bubble date/time pickerā€™s times then the text does update and the conditional does activate.


@blueback09 this is known issue in the library that the Air Date/time plugin is based on. See the above for a workaround

1 Like

Thanks.

Calling the airdate time pickerā€™s value list when a date range is selected no longer returns a list of dates from the rangeā€™s start to end. All my repeating groups that use the airdate time pickerā€™s list as the data source, no longer display anything, when just a few days ago it worked perfectly. Using the bubble debugger, it now shows the error: ā€œcould not guess value_idā€, whenever I try to access the pickerā€™s list. Is this due to some Bubble backend change? Has anyone else experienced this?

1 Like

Awesome !
Do you think you could add the possibility to have a placeholder value ?
Right now, if no initial content is set, it displays a blank field.
Thanks :slight_smile:

3 Likes

This is great :slight_smile:

Not sure if Iā€™m setting something up incorrectly on this page (https://sandboxalex.bubbleapps.io/version-test/airdate), but when in ā€œDate rangeā€ mode, I set the initial start date = (current date/time) and end date as current (date/time + 1 day). But before clicking into the date picker in the UI, it shows them backwards (tomorrow ā†’ today):
37 AM

Once I reselect the dates, in the UI, it reorders them properly so that it displays as start date ā†’ end date.

Any advice to make the initial values for the start/end dates appear in order on page load?

1 Like

If I set initial value property to date picker, it resets over user selected value when user resizes browser.

@seanhoots any plans to add auto-binding on the parentā€™s thing for this plugin? Itā€™s essential for my use case and is the only thing holding me back from using the plugin.

3 Likes

Is there a way to make the Initial Content of the picker a List of Dates? Only seems to accept a Single Date, but I may be missing something

Great Plugin BTW :+1:

1 Like