I have a Date Picker in an edit form which shows initial date from a thing’s date-field, next to the date picker i have 3 buttons: “Today” “Tomorrow” “within 7 days”.
I want when the user clicks the button “tomorrow” for instance, the Date picker should show tomorrow’s date, etc.
Is it possible? how?
Hi @cheskiefisch 
You can do this using a custom state:
Preview: buttons-with-datepicker
Editor: faye-demo-app | Bubble Editor
In this example, I created a custom state on the Datepicker called “Date” (type: Date, list: no)
Since the initial content of the Date Picker is from a Thing’s field, I placed the Datepicker in a group. Then added the conditional statement: “When Datepicker’sDate is not empty → Initial Content: Datepicker’sDate”. This way, when the User decides to click one of the buttons, the state is set and the group is reset to show the custom state value, instead of the Thing’s date-field value:
Button Workflows:
“When Today is clicked” →
“When Tomorrow is clicked” →
“When 7 Days is clicked” →
That should do it!
Brilliant!
Thanks! Great solution
How can I apply it for hours?
I mean I want to have the minimum hour what is selected at Date/TimePicker A and maximum hour Date/TimePicket A minimum hour + 2 hours (but that 2 will get it dynamically from the database).
How to make it work for min and max hours please?
Thank you in advance!
No problem To do this for hours in the minimum/maximum hour inputs, you could use “Date/Timepicker’svalue:extract hour”, because the hours inputs will accept numbers only, not a date. Then select “+ hours”. Here, you can either enter a number after “+ hours”, or use a dynamic expression in the place of the 2 below, as long as it’s referencing a single number field.
Thank you!
So I did this
When I click on date A , I still have the previous day available which is not okay.
When I click on hour B it will show a range from hour A + 3 hours (as it is set for that listing). But if I change the minimum hour from A to something else, on B will not be updated. E.g. A: 12:00, on B: 15:00 maximum hour at a 15 minute time interval. But if I change A: 15:00 B will still have the range from 12:00 to 15:00 instead of 15:00 to 18:00.
Should I make a workflow to reset input on B when A’s value is changed?
Okay so I realized that I should have used DateInput A’s value instead of Date/TimePickeg A’s value.
Now I am facing some issues on the way that the hours respond:
L.E. solution for problem #1: when you click/tap on the calendar it will take that hour you clicked/tapped.
L.E. how can I make initial content to be today, without option to select earlier than today?
Solution: Like this: 
So I have DateB to be DateA + (dynamic time chosen by the usr e.g.) 2hours.
How can I make that DateB will automatically change it’s placeholder and value based on what DateA has changed to?
@fayewatson thanks for this solution. However, it is not working for me fully.
It is working until user is allowed to change date picker date directly by clicking on the date picker itself. Once user does that then “initial content” is of no use, and hence when I click on “Next day” button, the custom state changes but it doesn’t affect date picker value.
Is there a solution to that?
I tried changing custom state value on date picker date change via the workflow, but it doesn’t seem to work, again probably because it is just affecting the “Initial content” and not actual value.
@mghatiya yes I have the same issue.
As soon as I pick a date directly from the picker, the picker value doesn’t reflect custom state value anymore (but the custom state clearly works becuase my RG based on custom state is still affected by clicking buttons, the picker just doesn’t change anymore).
@fayewatson any thoughts on this?
Much appreciated, guys!
I had dropped working on this one due to this issue and had forgotten about it.
Now since I have spent some more time with Bubble, I think I may have a solution for this problem. There was another input where I was setting value of the input based on external button click. What I had to do there was that after I set custom state of the element, I should “reset the input” for it to reflect the value of custom state again.
Can you try that here?
Please remember that ‘reset input’ can only be done by “reset relevant inputs” (as much as I know). And for “reset relevant input” to take your input in consideration, you can use that input in some way in a previous action e.g. if you put a dummy condition that input is valid etc.
I just tried it and it is working fine for me. Check out this link: https://beegle.app/version-test/test-date-picker
Check out the second example in this page as first one is for something else. Like I said earlier, I had missed out on “reset” step earlier. That’s crucial.
