Hello, I am trying to make an online language learning program, there will be teachers and students in the system. In this system, when people click on that day on the calendar, I want to assign the lesson start date to that day, but when they click on any day, the time date and picker opens as empty, for example, I want to take a training on October 29, I clicked on October 29, but the time and picker came up empty, how can I fill this time and picker with the day that is clicked?
Hello, how are you?
I believe that you are missing the date and time element (source-selected) to the destination element. For example: Source element (selection) date/timePicker, with input type date&time and the destination element text, here in the text in appearence you will call the date/timePicker value, which when selecting the date and time will insert this data in the destination text.
I finally Founded a solution with Chatgpt’s help;
Here is the Solution:
Goal
We want to create a system where:
A user clicks a date on a calendar (or any clickable area).
The date picker field automatically updates to show that clicked date.
Step-by-Step Guide
Step 1: Add a Custom State to Store the Selected Date
Select Your Calendar or Date Element:
Find the element on your Bubble page that the user will click to choose a date (this could be a calendar or a button).
Create a Custom State:
Go to the Element Inspector (click on the “i” icon on the calendar element).
Click on Add a custom state and name it something easy to remember, like Selected Date.
Set the Type of this custom state to Date.
Why we do this: A custom state lets us store data temporarily without having to save it to the database. Here, it will store the date the user clicked.
Step 2: Set Up a Workflow to Capture the Clicked Date
Create the Workflow:
Go to the Workflow tab in Bubble (you’ll find this at the top of the screen).
Click on Start/Edit Workflow (or Add an Event) and choose When an element is clicked.
Select the Element You Want to Use for Date Selection:
Bubble will ask you which element should trigger this workflow. Choose the calendar element or the clickable element that you set up in Step 1.
Add an Action to Store the Clicked Date in the Custom State:
After selecting the element, add a new action by clicking + Add an action.
Choose Element Actions > Set State.
Bubble will now ask you which element’s state you want to change. Select the calendar element where you created the custom state.
Select the custom state you created (e.g., Selected Date).
In the field for the value, set it to the date the user clicked. For example, it might look like This element’s Current Date (depending on the type of element you’re using).
Why we do this: This step makes sure that when the user clicks on a date, Bubble stores that date in our custom state.
Step 3: Link the Date Picker to Show the Selected Date
Go to Your Date Picker Element:
Find the date picker input where you want the selected date to appear.
Set the Date Picker’s Initial Content:
With the date picker selected, go to Initial Content in the Property Editor on the left.
Set the Initial Content to the custom state you created in Step 1 (e.g., calendar element’s Selected Date).
Why we do this: This makes the date picker automatically update to show whatever date is stored in the custom state.
Step 4: Test It Out
Preview Your Page:
Click Preview in Bubble to test your workflow.
Click on a Date:
Click on a date in your calendar or clickable element.
Check the Date Picker:
Open the date picker and see if it shows the date you clicked.
