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.
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>
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).
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:
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.
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.
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.
