offtopic: html timepicker
|
Tom Worthen
I am attempting to add a jquery timepicker to an html page. I like the control that seems to be made available with this one. If you are interested you can find it here: https://timepicker.co/.
Since I am not using npm, bower or cdnjs, I downloaded the zip file. I was able to get the test page to work similarly to the one on the website after a couple of minor changes to the visual.html page.
I added the lines required to bring the css and js required into my page. If you are not familiar with this I used <link rel="stylesheet" type="text/css" media="screen" href="/web_pro/assets/plugins/jquerytimepicker-1.3.5/jquery.timepicker.css"> for the style sheet and <script scr="/Web_Pro/assets/plugins/jquerytimepicker-1.3.5/jquery.timepicker.js"></script> for the script. This page has several other css files and js files that are handled in the same manor.
There is also a line that is required in the document ready function that looks like this: $('input.timepicker').timepicker({});
These 3 files are referenced on the page mentioned above. Last but not least is the input field with a class of timestamp.
My problem is that when I attempt to load this page I am getting an error: Uncaught TypeError: $(...).timepicker is not a function
I have tried several things but it appears to me as if the js file is not getting loaded. Does anyone know of an easy way to determine if an external js file is loaded on a page or why it can’t find that function?
Thanks, Tom Worthen Ph: (770) 579-1323 Fax: (770) 579-1692 CONFIDENTIALITY NOTICE:
|
|
|
|
Hi Tom,
it is hard to say, what is wong with your code - one wrong bracket is enough to get an error.
Why do you use the jquery-Plugin? In modern browser most times <input type="time"> or <input type ="date"> is much better and easier. Regards Friedrich |
|
|
|
Tom Worthen
Friedrich,
The reason for attempting to get this plugin working is because it restricts the times to what you want whereas the type=”time” does not. Yes, you can accomplish the same functionality by telling the user after the fact that they chose something that is not valid but the plugin doesn’t allow them to even select something you don’t want them to. Also, the plugin handles the step=”xxx” whereas the standard type=”time” does not.
Since I am unable to get this working I am abandoning it for now but as for the user experience I think it would be better to not allow them to select something you don’t want them to from the beginning.
Thanks, Tom
From: main@magicu-l.groups.io [mailto:main@magicu-l.groups.io]
On Behalf Of Friedrich Geisler-Buckert
Sent: Wednesday, November 16, 2022 3:26 AM To: main@magicu-l.groups.io Subject: Re: [magicu-l] offtopic: html timepicker
Hi Tom,
it is hard to say, what is wong with your code - one wrong bracket is enough to get an error.
Why do you use the jquery-Plugin? In modern browser most times <input type="time"> or <input type ="date"> is much better and easier. Regards Friedrich |
|
|
|
I don't know, what are your requirement, but there are lot of attrubutes with "Time". I think for most cases it is very good:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
I used the jquery-ui Date-picker plugin a few years ago, which is quite the same - it was a nightmare. Now i only use the HTML Input
|
|
|
|
Polgár Ferenc
Hi Tom,
toggle quoted message
Show quoted text
Try this: https://stackoverflow.com/questions/16979122/how-to-set-min-value-for-input-type-time-elements Ferenc 2022. 11. 17. 15:14 keltezéssel, Tom
Worthen írta:
|
|
|
|
Tom Worthen
For dates what you suggest might work very well. What I said was that for time input the max, min and step have no effect on the input.
Here is my input: <input id="Requested_Time" name="Requested_Time" type="time" min="08:00" max="17:00" step="900">
As you can see, I have set the minimum time to 8:00 and the max to 17:00 with a step of 900 seconds which is 15 minutes, meaning the only valid time entries should start at 8:00 and continue until 17:00 every 15 minutes.
This is what I get on the page:
As you can plainly see, those setting are ignored.
Thanks, Tom
From: main@magicu-l.groups.io [mailto:main@magicu-l.groups.io]
On Behalf Of Friedrich Geisler-Buckert
Sent: Thursday, November 17, 2022 10:50 AM To: main@magicu-l.groups.io Subject: Re: [magicu-l] offtopic: html timepicker
I don't know, what are your requirement, but there are lot of attrubutes with "Time". I think for most cases it is very good:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
I used the jquery-ui Date-picker plugin a few years ago, which is quite the same - it was a nightmare. Now i only use the HTML Input
|
|
|
|
Tom Worthen
Ferenc,
Yes, as I had mentioned earlier you have to use javascript or css to “validate” the time with standard html time. That is the reason I was attempting to get the jquery code to work because it did not require additional javascript and only allows the users to select times you specify. Here is the “test” example I got working but I can’t get it to work on our web pages. L
Yes, the user could manual enter a time but it shows them what is wanted and makes it easy for them the select what you want them to select.
Thanks, Tom
From: main@magicu-l.groups.io [mailto:main@magicu-l.groups.io]
On Behalf Of Polgár Ferenc
Sent: Thursday, November 17, 2022 10:59 AM To: main@magicu-l.groups.io Subject: Re: [magicu-l] offtopic: html timepicker
Hi Tom, 2022. 11. 17. 15:14 keltezéssel, Tom Worthen írta:
|
|
|
|
F*ck - your are right - this is not working
Good luck with the other plugin |
|
|
|
Polgár Ferenc
If this is what you need, the easiest way is to you use a select
with the time values you want to allow for the user - as on your
image example.
toggle quoted message
Show quoted text
Ferenc 2022. 11. 17. 17:10 keltezéssel, Tom
Worthen írta:
|
|
|
