Forum Academy Marketplace Showcase Pricing Features

Native date picker [Working Code]

Hello Bubblers!

I know there is a date picker but on mobile, it does not work well. The code below actually works in fixing this:

[details=Code]

  <script>
      if (!Modernizr.touch || !Modernizr.inputtypes.date) {
          $('input[type=date]')
              .attr('type', 'text')
              .datepicker({
                  // Consistent format with the HTML5 picker
                  dateFormat: 'yy-mm-dd'
              });
      }
</script>

I have tested it and it actually utilizes the IOS (Haven’t tested android but I’m sure it will work) native date picker within the bubble HTML element. I have tried using the element editor to make this myself but found little luck returning the value. Maybe if someone more advanced in the element editor or bubble themselves could.

5 Likes

Nice. I can confirm this method works on Android as well.

You can add the following code to create a hour/minute picker in 15min increments (native to both iOS and Android):

<input type=time min=9:00 max=17:00 step=900>

1 Like

Awesome! Can you edit your post and delete some tags on the code you pasted, we can’t actually see it :stuck_out_tongue:

I’m happy to make a plugin for this, but it might be a nice addition to The Toolbox Plugin. @mishav - what do you think?

I found that using datetime-local is great for storing time along with date. Here is code I have working, we’d just need to add a couple lines to store the value (either in bubble_fn_date1, etc…or as part of the plugin).

<style>
input[type="datetime-local"]
{
    font-size:32px;
}
</style>

<input type="datetime-local">

<script>
if (!Modernizr.touch || !Modernizr.inputtypes.date) {
$('input[type=date]')
.attr('type', 'text')
.datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
</script>
1 Like

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