I am trying to create a cross-browser time input.
<input type="time" value="22:14" tabindex="0"></input>
The problem is it decides whether to display time in am/pm format or in 24h format on its own. And some browsers do not support it and display a text input instead.
Is there a library for this purpose? Or the only way is to write a custom script for a text input to make it look like a time input?
If you want a homogenous cross-browser experience I think you'll have to use some third-party library.
Take a look at Bootstrap Timepicker for instance.
I have found a good library - jQuery Based, cross-browser UI Library - w2ui!
More information on its DATE and TIME controls: http://w2ui.com/web/docs/form/fields-date
<div> <input type="eu-time"> </div>
And a simple script for this:
$('input[type=eu-time]').w2field('time', { format: 'h24' });
Related
I'm using the datetime-local but my teacher say there is a better way for the date that can be selected is using JavaScript.I searched in google but only have writing out today date.Does it have in js?
Google 'Javascript Date Picker'
A few examples:
https://mcdatepicker.netlify.app/
https://www.npmjs.com/package/js-datepicker
https://easepick.com/
https://jqueryui.com/datepicker/
All offer improvements / addition features.
It depends on what you want to use, what your use case is and how complicated you want the interactions to be.
Look at any of 'getting started' links on these for a good place to start.
What about a simple <input type="date">?
<input type="date" >
I know similar and identical questions have been asked before but none have gotten the answer I need.
I have a form where users enter a date. Obviously it is better for the UX that they have a calendar or similar easy way of picking the date for something. However, Firefox does not support the date picker input type offered by Chrome and Safari.
Because I want my application to be as light-weight and easy to load as possible, I do not want to use JQuery UI. I am using JQuery for many other things so that is a possibility. I want something that matches the GUI of Firefox and does not inhibit the date picker of other browsers that do support the input type.
If this is not possible, is there anyway to make sure that the date is formulated similar to how Chrome formulates it's dates or to in some other way make it easier for the user to enter the date? Preferably with JavaScript or HTML examples.
If you do not want to use jQuery UI, you can use something else like https://github.com/dbushell/Pikaday - it's lightweight and certainly better than jQuery UI one in my opinion.
In order to be consistent with the formatting, you could disable Chrome's native date picker (and Safari) and instead consistently use the same date picker across your application for similar UX.
Can a calender be embedded into a website without using scripring language?
It can be done using java script but i am not sure about html
If you mean, how can I add a date picker to a form via HTML5... Use the poorly supported <input type="date">. For more information http://diveintohtml5.info/forms.html#type-date
Sure, you can use HTML5 date controls. Taking a look at http://caniuse.com/#feat=input-datetime though shows that there is a serious lack of browsers implementing them, and standardization is not the best.
Still, the base markup is pretty easy:
<input type="date">
I would still recommend something like the jQuery UI Calendar control, though.
I'm using a jquery-ui datepicker in a Rails 3 app. The datepicker is currently tied to a text field.
What is the best way to ensure that this degrades gracefully? i.e. it would make more sense to have the datepicker tied to an HTML5 date select field, but I'm having trouble implementing this as it doesn't seem to be readily supported by jquery.
Has anyone else run into this issue, and if so, how have you tackled it?
Thanks for any ideas.
it still works in the demo (no CSS though), even with <input type="date">.
the new HTML5 input elements degrade to a type="text" if the browser doesn't support them. thus, you can add date-picker to a type="date" input.
and if you fear that there might be a "double-effect" where the natural date-picker goes with the jQuery date-picker, then take a look at this article to detect if an element is supported, and selectively apply your date-picker.
I am looking for some kind of example of a Javascript Time Picker that is similar to the one used in Windows to pick the time...well except with out the seconds being in their. I have a mockup in place at the moment but trying to figure out how some of the user functionality should be be as it is two inputs and a dropdown. I guess I just am not happy with it at this point.
Thanks ahead of time for any help
There are a number of jQuery plugins that you can use for the perfect looking time picker control.
Here is a good one: http://plugins.jquery.com/project/timepicker
The Windows time picker (if you're referring to the one to change the system clock) is basically just a masked edit text box. If you're looking for something similar, you just need some JavaScript to do masked edits, like this one:
http://digitalbush.com/projects/masked-input-plugin/
To make it specifically for time, you should be able to easily add logic to ensure the hours don't go over 12 (or 24), and the minutes don't go over 59.
Personally, I prefer the way Google Calendar does time selections. There is a jQuery plugin for this which can be found here:
http://labs.perifer.se/timedatepicker/
Here's a cool one.
http://www.java2s.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm
An online example of the control is posted here.
Like Dan said, if you are looking for a masked text input and if you want to use the PrototypsJS framework, there is http://code.google.com/p/phenx-web/ .
And if you want a good date/time picker, you could use this : http://home.jongsma.org/software/js/datepicker (also PrototypeJS). I'm currently working on it with Jerermy Jongsma to add more features.
I'm pretty fond of the jQuery stuff, There is a fairly nice one here.
I ended up creating a prototype time picker that for the time being is less fancy than a lot of the others out there. It shows up a regular input until you click on it then it shows a dropdown that has times in it.
I can share the code if anyone is interested
A timepicker shouldn't slow down the user's interaction, should be pretty straightforward without having to play with it for a while, and should be keyboard-accessible for users who can't manipulate a mouse. The time-picking functionality provided by the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget with TimeZone Support meets all of these design goals, supports countless date/time formats and is easy to customize using CSS or jQuery UI.
A good test of timepicker usability is to think of an odd time (say, 10:32pm) and then see how long it takes to accurately select that time using various time pickers. You can probably do it with Any+Time™ faster than you can even write out the time by hand... how's that for speed and ease of use? :-p