Forum Documentation Showcase Pricing Learn more

Date Picker default

I am using a Date/Time Picker with Initial content already filled. How do I stop the date picker showing
image

How can I get the picker not to show when the date in already filled? An input will not work for a host of reasons

I want it to look like this but the Last Night and Campsite Costs are currently hidden until I close the picker
image

Is there an action I can add to close the picker automatically?

1 Like

I’m facing the same issue. Did you find a solution?

You could also place it in a group and put a conditional on the group to make the group not visible when the date/time picker value is not empty so it wouldn’t be shown

I personally use inputs to store dates on page and refer to the input value

Thanks for the reply but unless I’ve misunderstood your suggestion I’m not sure this solves the issue.

The problem is not hiding the component itself. The problem is that on page load the component by default automatically shows the ui for choosing a date and time when we’ve pre populated it. OP screenshot shows this.

Use case for me is to show a user a date but allow them to amend it before continuing. In most cases I don’t expect the user to change the date so I don’t want the UI to pick a date to appear. Just show the date. This is normal behaviour of date fields in mobile/web forms in general.

I’m wondering how you are getting the date picker UI to automatically appear in that scenario because I’m not seeing that at all. I’m seeing exactly what I believe you and OP want… a date field that is pre-populated without the date picker UI showing up. Interesting…

@paulj6… are you setting focus to the date field on page load, by any chance? With that action in place, I am seeing the behavior you are describing.

Sounds like hiding the component itself would make it so that the problem as you described above would not occur.

So what I do is I have an input, that input stores the value of dates that were previously selected. I use workflows to to set focus on the date picker when an action occurs, like when the input is selected. This way when the user comes to a page the input shows the date previously selected, then they can click on it, the date picker shows, and then can amend the date and continue after amending. What is great about this method, is if the user doesn’t want to change the date there is no date picker visible and they can still see the date previously selected in the input.

It is a bit more complicated, so maybe beyond the range of what you are trying to achieve right now.

I’m not setting focus on page load but this gave me ahelpful clue and I can see that in my case the behaviour occurs on a popup but not on a page. So the popup event must also be giving focus to the date picker.

Steps to reproduce:
1st - when used on a page the datepicker works as I expected:

  1. create a blank page
  2. Add date picker element
  3. Customise input placeholder with a text date.
  4. When previewing this page the datepicker is shown with placeholder date and no additional UI elements to edit the date. Thumbs up.

2nd - when using date picker on popup - not as expected

  1. Using page created above - add a popup
  2. Add a button configured with workflow to show popup when clicked.
  3. add a datepicker to the popup with same placeholder date configured.
  4. When previewing - the datepicker on page works as expected before but the datepicker in the shown popup shows the edit date UI.

I imagine that when using the popup up this is also giving focus to the datepicker element in the popup.

I can find a another way instead of a popup element for now. Thanks for the clue.

1 Like

Thanks for the suggestions. I think using the element not on a popup should be ok for my needs.

My pleasure, @paulj6, and I was able to replicate the popup behavior you described. If you really want to use a popup, the only thing I can think of is to set the focus to something else in the popup so that the date picker doesn’t open… but I’m guessing you thought of that already, so that idea probably isn’t all that helpful.

Best…
Mike

As the initial poster on this post I have stood back and watched this discussion. My frustration is I fixed the issue in my popup that I featured in the initial post but I have no idea how. I find other popups where I have not fixed it and still don’t know how to fix it. I have seven different popups, none set a focus as a part of the workflow. Two have other groups above the date picker - these are good. But then I have another popup that doesn’t have a group above the date picker - the date is the first input field and the datepicker does not show when there is an initial content. Great - just as I want it to appear. Yet other popups workflows are exactly the same and the date picker shows and does not disappear until clicked on. As @paulj6 said In most cases I do not expect the user to change the date so I do not want the picker to show.
So still frustrated :frowning:

I definitely understand, @motorhome… there’s a special kind of frustration that comes with it looking like there is no rhyme or reason as to why something is happening, and yet you still have to try to work around it for the good of your app.

If it helps (and I wouldn’t want to go the route of changing things if I were you, but…), I have noticed that the Air Date/Time Picker plugin does not seem to exhibit the same behavior in a popup, so just throwing that out there.

Oh, and because I am never opposed to going the hack route (within reason) to get something to “work,” you could consider hiding an input on the popup and setting the focus to that input so the picker doesn’t open. I would either use the plugin or this “solution” if I were you because the inconsistency in the behavior (and ultimately, the user experience) that you are seeing would drive me insane, and I would definitely need to address it.

Best…
Mike

@mikeloc. thanks for that idea. I sounds a very reasonable solution. I will try it

1 Like