Forum Academy Marketplace Showcase Pricing Features

Native date picker [Working Code]

I agree that would be a great addition to The Toolbox Plugin. The javascript to bubble workaround would probably work but would be confusing in editing and sharing. Would be great if someone who is good in the element making field could do this so it could be called like any other normal input.

@emmanuel what do you think of possibly implementing this into stock Bubble?

Hmm I’m using it now, but it’s not storing the correct timezone (it’s about 10 hours off). Not to mention, Bubble stores everything but the time into the DB because we need to pass the correct format when writing to a Thing).

How are you pulling off the date/time value from the element?

I think he is using your Bubble to Javascript with bubble_fn_date that is what he mentioned earlier.

Yes, I am using bubble_fn_intime(document.getElementById(‘inputTime’).value);

I think a new plugin for “Native controls” would be more appropriate.

1 Like

Can anyone explain how to use this in more detail?

Thank you.

2 Likes

Would it make sense to ask the Bubble Team to add this to the default date/time selector to run conditionally when the OS is IOS or Android? …seems that if it’s pretty much always needed that it’d be much cleaner to update the core Bubble code than all of us have to use a workaround. Just a thought.

I have already tagged Emanuel in an earier post, we will see if he can get around to checking it out. Once a plugin is released it will be simple to drag and drop. Many elements like this are added in through plugins.

I am working on creating the plugin for this but won’t be the fastest process as I am pretty busy. If I can’t get the plugin soon enough then I will create a video tutorial on how to use the current work around.

The biggest issue right now is getting Bubble to store the correct time zone in the database. It store’s the UTC value and we need to convert it to the current user’s local timezone. If we can take the time to nail that down, we could just copy/paste the code into a plugin for everyone.

The issue stems from reading the local datetime value from the control as a string, without timezone information, then using this string in a form that parses UTC date.

To put back the timezone offset, try doing something like this:

bubble_fn_intime(new Date(document.getElementById(‘inputTime’).value).getTime()+(new Date()).getTimezoneOffset()601000);

Assumptions: Javascript to Bubble is configured as date, and the function will be run when the date/time has valid values.

This seems to be a work-around for precise month calculations. What’s the best way to integrate it using @mishav’s toolbox?

I’ve managed to get it working using the toolbox, but it is currently generating a slew of javascript errors both in the console and via alert prompts. I’m still debugging, but will get back to you soon.

1 Like

After my frustration with the not so responsive default datepicker in bubble i decided to give this a try.
Here are my tests on different browsers on android and ios.
I only tested the date without time so i used <input type="date">
NB:I was testing only the look and feel and not how to get and use/store the value.

  1. Firefox on Android


    Issue: No year picker

  2. Chrome on Android


    Issue: Looks great but Its not obvious that a user can click on the year to select a different year.

  3. Chrome on ios


    Looks really great

  4. Safari on ios


    Same look and feel as the chrome.

My conclusion: If you’re looking for a very responsive and good looking date and time picker for an ios app in bubble, this is the way to go.
Unless there is a work around the year issues in android i don’t think it will be ideal.

Really hoping bubble will give us a very good looking date picker than the current one which messes up when very small.

3 Likes

Hi, did you ever get this sorted out?

Is a date picker in this format on mobile the best from a UX point of view?

I think simple dropdown might be quicker on mobile

Can somebody please advice how to use this code in order to have native date picker with ability to save the value ??? Thank you!

Bumping this, I’m amazed no one made a plugin. For mobile it’s a no brainer

Bumping again has anyone managed to make the datepicker native?

anything? Just…wow…