Get Default Current Time from Time Picker

Ask the community
,
1

I have a time picker on my site. This is set to display the current time as a default time. However I have noticed that if a user does not change that time but leaves it as current (which would be quite common), I cannot seem to obtain that time from my code. E.g. my code:

const time = String($w(“#timePicker1”).value);
const hhmm = time.substr(0,5);
$w(“#text51”).text = hhmm;

Returns blank in text51, because (I suspect) the timepicker1.value is not set. I.e. the current time displayed on the timepicker is merely a display and not a value.

The above code works fine if the user actually clicks onto the timepicker. But that seems wrong and a little pointless to me. If the current time is what the user wishes to use, they should be able to move on pass that field without having to select it?

Appreciate any help
Thanks

2

If you just want to display the current time/date on your website, then why bother doing it in a datepicker which obviously the user would have to pick a time for it to submit a value etc.

Then just display it on your page already as a read only element and then just add that elements vale when you save.

Like as shown in this Wix example for showing date on your page, to add time just add ‘today.toLocaleTimeString();’
https://support.wix.com/en/article/corvid-tutorial-displaying-todays-date-with-code

$w.onReady(function () {
// Gets today's date
const today = new Date();
// Sets the property of the text element to be a string representing today's date in the user's local format
$w("#dateText").text = today.toLocaleDateString();
$w("#timeText").text = today.toLocaleTimeString();
})
3

Thanks for replying. I do want the user to select a time, it’s just that on more occasions than not the user would want to use the current time (but not always), so by defaulting the timepicker to current time should make things a bit more user friendly and they can ignore the picker unless they want to input a different time. I can get round it by not defaulting to the current time and always forcing the user to select a time but that just seems counter-productive.

Thanks again.

4

Actually - your answer has given me an idea for a get-round. I will use the code above to get the current time and then IF the user selects a different time from the timepicker, override it else use the one from the code. Should be seamless to the user. Thanks for your input!

Would still be interested though if there was another way as I would have thought you could just grab the time displayed on the timepicker without the user have to click on it.

5

If you use the timepicker element and leave it setup as enabled for the user to use, then yes they will have to select a time for it to trigger a time value for you to save in the form etc.

If you have to use it then you can set the timepicker to show current time and to be displayed as read only and go into the timepicker settings to make the design match the design of your other elements.

You can see more about what I mean about changing the design here, although this Wix example page only talks about the datepicker.
https://support.wix.com/en/article/corvid-formatting-dates

6

I have the same issue. In the main a user will select a time, but on the odd instance they will default to the current time. I suspect there is a fault with the TimePicker element in that it doesnt set its value until there is some user interaction. I got round this by setting the TimePicker element in the Page.On ready handler i.e.

let xDate = new Date();
let xTime = xDate.getHours() + “:” + xDate.getMinutes();
$w(‘#tpkStart’).value = xTime;

Messy, but better than testing the elements validity.

7

There isn’t a fault with the timepicker element, it is the same as the datepicker element,

If you have it enabled as a user input on your page, then the user must set a time or date on the specific element for it to register a value. If no time or date is selected by the user, then no value will be returned to be able to be saved in a form.

If you have set times or dates in that your dataset that you wish to use instead, then you can simply set the element to be read only and connect to your dataset to show that set time or date, all you would need to do then is to set the disabled display to be the same as the regular enabled display.

8

OK, I accept that the elements are operating to specification. However, the use case that both Steve and I need is valid. We need the timepicker on load to show the current time and to use it as an input element most of the time, but also allow the user to skip it if they just want the time displayed. It does not even need to be the exact current time, simply the one displayed is good enough. The workaround I posted earlier needs updating as it causes problems if the hours or minutes are less than 10, so I’ve put this in my page.onReady handler:

let xDate = new Date();
let xTime = xDate.getHours().toString().padStart(2,‘0’) +
“:” + xDate.getMinutes().toString().padStart(2,‘0’);
$w(‘#tpkStart’).value = xTime;

Hope this helps Steve.

9

We released a fix for the issue of Time Picker having an empty .value when set to “Current time”.
If you happen to check this, we would appreciate it if you leave a comment whether it’s fixed for you or not. Thanks!