How to clear date/time picker

I try to make the date value empty when it’s not focused.
but it doesn’t work! Can anyone help?
Thanks in advance

you can use custom state

What would be the point of that (unless you’re not planning to use the value anywhere?)

You can do it, just by adding a workflow to reset the input when it’s not focussed.

1 Like

Agree with Adam. That doesn’t seem to make a lot of sense to me…
As soon as you move your mouse out of the datapicker, you will clear it.
What are you planning to do?

when the page is loaded, search data for a date.
when any number is inputted, search the number only!


another words, to search today’s data by default, and then user can search a number without date involved.

Why your user can’t clear the DatePicker by clicking in the “Clear Button”?


1 Like

yes, they can .
I just want to make my app more easier to use for the users. :->


not able to set the default value to [Current Date/Time] ?

Hey @ericwuu

If I understood correctly your users may search by several options. Date is one of them.
To clear any of these options your user need to delete the input’s text. With the date is the same thing, to not use the date in the search , they need to click in your datepicker and clear the seleted date. This is the expect behavior…

What you asked was a way to clear the datepicker whenever the datepicker lost its focus, what is a mistake. Because this event will always happen as soon as your user move the mouse away from the datepicker. In other words, you will break your datepicker.

What we are trying to understand is why the datepicker must clear itself. And trying to explain to you that the behavior you expect doesn’t make sense. :sweat_smile:

Why your datepicker must have a date as default? Leave it empty.

You can. Create a workflow to run on “Page load” and change this state to Current Date/Time.

1 Like

Wouldn’t that confuse your users…?

If they see todays date in the date picker, they would think that’s what they’re searching for, but then when they click search they’ll be getting results for all time?

It would confuse me…

But if that’s what you want to do, then you can do exactly that…

Maybe set the default value of the date picker to the parent group’s date, and set that date to todays date on page load (be sure to leave the default value empty).

Then when a your other input is focused, reset the date picker’s parent group’s data (to its original, empty value).

You’ll need to add some conditions so that only happens once (otherwise your users will never be able to select a date.

And there’s no obvious way to run a workflow when an input is focussed in Bubble (for some
reason)… but you can copy and paste the expression from elsewhere (at your own risk), or use some bubble workaround (e.g. have a hidden element with a condition to become visible when the input is focussed, then run a conditional workflow when that element is visible)…

Or just use JavaScript to add an event listener to the element.

“set the default value of the date picker to the parent group’s date, and set that date to today’s date”
— We are not able to set CurrentDate/Time on a custom states.

it does not confuse me because what I want is:

  1. when the page is open, list all records that were created today.
  2. when the user try to search for a PO#, list out records that belong to the PO# ,No matter what date it is.

I try to find a way to clear the Date/Time Picker automatically…

I never said anything about a custom state…

thank you for the help. I think I just have to refine/adjust my goal.


you suggested : “Maybe set the default value of the date picker to the parent group’s date”
isn’t the parent group’s date a custom state?


The parent group’s date refers to the content (data) of the parent group… not to a custom state.

1 Like

oh I see. thanks Happy New Year!

This topic was automatically closed after 70 days. New replies are no longer allowed.