🗓 [FREE Plugin] Air Date/Time Picker

Hey take a look at what i did in your app.
You can access the Pickers range values using AirDate/Time pickers range:start and AirDate/Time pickers range:end

I will get on it. I have just been booted from my cafe. I will be back online again in 20 mins

HI,

Thank for having a look at this. I have lost the ability to store ranges? Plus it only saves the start date. Is it possible to save a range and then block that time period out. How do I save the end date? In the same field as the start date?

eventually i would like to display this in a calendar.

You have to create the database field as a date range.

I have attempted that. I ended up deleting it because nothing would save to it. It just went red! when I add it am I

Making changes to list?
Do i add or add a list?

i have not managed to get any of these to work with a list of date ranges.

I’m still not sure i understand exactly what you want to do.
Do you want to save each range in a separate row in your table or to save all the ranges as a list in one row.

If you want to save each range in a separate row, then have a field whose type is date range. Then in your workflow you create a new thing and set the range field to the range value.

If you want to save all the ranges in a single row then you need to create a field whose type is a List of date range . Looking at your database I didn’t find any field which was a list of date range.
Because the field is a list you can use you can then use the Make changes to a list and then add the new range value to the existing range list.

Hi @seanhoots

Thanks for having a look. I ended up deleting that data type because I could not get the logic to make changes to a list.

Do you have an example of a workflow that will allow me to save dates to a range of dates data type? I just need that text to turn blue!!! It will not :sob:

If i had an example I could copy and learn from that. I am going to give it another go now.

@miguel Hey,

Did you get the answer for this?

Sean,

Do you have an update on how to set air date/time picker to empty? I’m really stuck on this as I need to manipulate dates programmatically, based on value changes elsewhere on a page.

Would it help if I create a sample page for you to work with?

Hi All,

I am trying to move away from this plug for when I need to use times. The time functionality just does not work and is not very user friendly.

Has anyone found a solution with this plug in to fix the problem with time?

Hi @rachel.camp900 what problem are you encountering with the time?

Echoing what Sean is asking, @rachel.camp900, date datatypes always have a time component. That’s what a “date” is — a unique moment in time.

Text strings can represent dates (like a day or a time of day), but they are of limited use in evaluating the relative timing of multiple dates/times.

(This being said, not every possible or even frequently useful date-related function is possible using the Bubble back end. Date-intensive applications will often take advantage of various JavaScript libraries for date/time manipulation [such as moment.js]).

HI All,

My problem with the time is that when you select time then you are restricted in how much time you can select. In the print screen I can only go up to an hour from the start time.

You also need to select the start time and then immediately the start time …then move onto the end time and date. If you do not it messes up.

@seanhoots ,

Have you been able to resolve this? It is still causing me trouble.

How can I find documentation for Air Date/Time Picker?

Specifically, I am trying to understand what triggers the date selected event.

Unfortunately there is no formal documentation. Something i will have to find time to do.
But all documentation is implicitly burried deep in this thread.
Any time i posted a new feature or update i explained it in this thread.
I didn’t anticipate this thread blowing up so most of these are buried deep up the thread.

The date selected event is triggered, if

  1. The user selects a date from the calendar and close the calendar
  2. A set date action is use to set the picker to a date.
    Note that this event fires even if the new date is the same as the old date. This is desired in some situations.
    If you don’t want this behaviour you can prevent this by having a condition on the date selected event.

New Update (Version 2.9.0)

This update is an important update with bug fixes, improvements and new features.

Added

  1. A new workflow action, clear picker. This action clears the picker of any date selection. It is similar to clicking on the Clear button on the calendar. Note that this action is different from a reset action which resets the picker to its original values when it was first loaded.
  2. Ability to choose different styles for the disabled/blocked dates. Previously blocked dates had a gray font with a strikethrough. There was something about it that didn’t look aesthetically pleasing to me so i thought i will add more options.
    image
    Here is the preview of the different options

    A little back story. The third option, gray text, was the original style from the library this plugin was created from. But it didn’t look very clear that is why i changed it with the strike through. The again i thought the strike through look wasn’t consistent with the look and feel of the ui so i added this new gray background. Yes i’m this picky :sunglasses: .
    Now you have all options.

Improvements/Modifications

  1. Renamed the date selected event to value is changed. This is a non-breaking change. If you update your plugin the name will change automatically and it shouldn’t break anything.
    But there is a little change in when this event is triggered.
    This the behaviour of the value is changed event. *
    a) It is not triggered on page load. Previously it could trigger on page load if the picker initial value wasn’t empty.
    b) It is triggered when the user selects a new value from the calendar and the calendar closes. Previously it was triggered whenever a value was selected even if the was the same old value.
    c) It is not triggered by non-user action. That is the value changed event won’t be triggered if the pickers value is changed through some workflow action, e.g. the set date action. I wasn’t very sure about this one but this is how the bubble default date/time picker works so i decided to follow the same behaviour.

  2. The set date action can set the picker to an empty value (null). Just leave the date value blank when you call this action. This will have the same effect as calling the reset action.
    image

Bug fixes

  1. The reset action bug is fixed.

Removed

None

@laurence hopefully this update will address some of your concerns.
@Bubbleboy this should solve your issue with the value changed event triggering on page load when your API loads.

4 Likes

Hi Gents,

Does this new version look at the challenges of time entry - or is this human error on my side. I would like to use this plug in more in my APP but I cannot at the moment because the time picker does not work.

Best,

Rachel

Hi @rachel.camp900,
You’ve mentioned that you have issues with the time but I’m still not sure exactly what problems you have with time.

What does this mean?

What does this also mean?

Please articulate your problem very well and I will be happy to assist you.
If possible create a demo page to show your problem with the time and share here and I will take at a look at it.

As far as I’m you’re the only one complaining about time issues with the plugin.

I will try again. I am not explaining very well.

EXAMPLE 1

I am saving date ranges. See print screen below. I select the start date and the end date but i do not select the time.

I go to change the start time and the end time to be the correct times (after i have selected the start date and end date).

ERROR - I change the times but the times are really difficult to change. You have to have the order exactly right otherwise the times are a mess.