Using Time Picker with Date Picker Component

You can add a time picker in the date picker component, so the users can select the time along with the date.


Enable Time Picker

First select the date/date range picker on your page:

Scroll down the properties panel and enable Time Picker:

Time Picker Options

You can select whether to display the time picker in 24 hours format or use 12 hours AM/PM.
Note - this only affects how the time picker looks, the time format displayed on the page depends on the date format options which you are using:

Set the increment of the minutes selection list. Setting this to 15 will show 00, 15, 30, 45 as options:

Time Format Options

Scroll up to the date picker options. You need to add the hours/minutes in the date format options in order to display them in the input:

Here are the available time format options:

H - 24 hours (0, 1 … 22, 23)
HH - 2 digit 24 hours ( 00, 01 … 22, 23)
h - 12 hours (1, 2 … 11, 12)
hh - 2 digit 12 hours ( 01, 02 … 11, 12)
m - minute (0, 1 … 58, 59)
mm - 2 digit munute (00, 01 … 58, 59)
A - AM/PM
a - am/pm

Example:
YYYY/MM/DD h:mm a will return: 2019/06/18 10:45 pm
YYYY/MM/DD HH:mm will return: 2019/06/18 22:45

datetime

4 Likes

The time picker option doesn’t show up on my interface, am I doing something wrong?
Annotation 2020-05-01 114901
I’ve tried with both experimental features enabled and disabled.

Hi @Nathaniel,
It didn’t appear for me yesterday, I deleted the Wappler configuration folder and restarted Wappler and it appears now.
What OS are you and I can tell you where the configuration folder is if you need it.

Mim

Hi @mimuk, I’m on windows 10. Thanks for the help!

C:\Users{{your-username}}\AppData\Local\Wappler
Quit Wappler first from the system tray

1 Like

Thanks @mimuk, that worked!

Hi Teodor,
Did you eliminate this feature (time picker) from Wappler. I deleted the root folder and reinstalled wappler, it did not fix as suggested here.