The Date/Time component allows users to input dates, times, or a combination of both. Whether you’re scheduling events, collecting timestamps, or organizing parent-teacher conferences, this component simplifies gathering accurate time-sensitive information.
Example Date/Time Component
Present date, time, date/time, and month options to your submitters
When should I use a Date/Time Component?
This component is great for any scenario where you need to capture specific dates or times.
Here are some common scenarios where a Date/Time component is ideal:
Timesheets
Use it to log start and end times for employee hours or volunteer activities. This helps you keep track of work hours and ensures that time entries are valid and correctly formatted.
Use it to log start and end times for employee hours or volunteer activities. This helps you keep track of work hours and ensures that time entries are valid and correctly formatted.
Event Registration
Let users choose a date for events or workshops, like conferences and facilities use requests.
Let users choose a date for events or workshops, like conferences and facilities use requests.
Features & Configuration
Adding a Date/Time component to your form is straightforward. Simply click on the Date/Time option in the component library and drag it onto the canvas.
After placing the component, you can customize its properties in the right-hand panel:
Properties
Label
This text displays above the input field to describe what the user should enter.
This text displays above the input field to describe what the user should enter.
Width
Choose a width (between 1 and 12).
Choose a width (between 1 and 12).
Required
When enabled, it forces the user to enter an appropriate value if the field is visible.
To make the field optional, disable it.
When enabled, it forces the user to enter an appropriate value if the field is visible.
To make the field optional, disable it.
Input Settings
Type
Specify the type of input expected: Date, Time, Date & Time, or Month.
Specify the type of input expected: Date, Time, Date & Time, or Month.
Date
Displays a date picker, allowing users to select a specific day, month, and year.
Displays a date picker, allowing users to select a specific day, month, and year.
Time
Displays a time picker, allowing users to select a specific time.
Displays a time picker, allowing users to select a specific time.
Date & Time
A combination of both date and time inputs, perfect for situations where you need users to provide an exact point in time.
A combination of both date and time inputs, perfect for situations where you need users to provide an exact point in time.
Month
Allows users to pick only the month and year, which can be useful for applications like monthly timesheets.
Allows users to pick only the month and year, which can be useful for applications like monthly timesheets.
Interval
When you choose a Time or Date & Time type, you have the ability to control time intervals (ranging from 1 minute to 60 minutes) to further narrow the values submitters can choose.
When you choose a Time or Date & Time type, you have the ability to control time intervals (ranging from 1 minute to 60 minutes) to further narrow the values submitters can choose.
Logic
Display Logic
Control when this component shows or hides. We have a full guide on Display Logic for you!
Control when this component shows or hides. We have a full guide on Display Logic for you!
Validate Logic
This logic decides what is valid input for this component. This is helpful when there are special circumstances around the input being valid. This article can help you configure validation logic.
This logic decides what is valid input for this component. This is helpful when there are special circumstances around the input being valid. This article can help you configure validation logic.
Min Date/Time Logic
Set the earliest date or time users can select. You can either enter a specific value or use a formula to determine it dynamically.
Set the earliest date or time users can select. You can either enter a specific value or use a formula to determine it dynamically.
Max Date/Time Logic
Set the latest date or time users can select. You can either enter a specific value or use a formula to determine it dynamically.
Set the latest date or time users can select. You can either enter a specific value or use a formula to determine it dynamically.
Details
Hint
Hints are helpful text that appear underneath the component. They help you clarify things for submitters.
Hints are helpful text that appear underneath the component. They help you clarify things for submitters.
Tooltip
Tooltips are helpful text that submitters can see when they hover over the question mark icon.
Tooltips are helpful text that submitters can see when they hover over the question mark icon.
Name
By default, this matches the Label, but you can change it if you want a different column header to appear in the CSV or spreadsheet exports data.
By default, this matches the Label, but you can change it if you want a different column header to appear in the CSV or spreadsheet exports data.
ID
Each Droplet component has a unique ID to reference in other parts of your form, workflow, and notifications. It's best to edit these IDs to make them a bit more descriptive.
Each Droplet component has a unique ID to reference in other parts of your form, workflow, and notifications. It's best to edit these IDs to make them a bit more descriptive.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article