I have created an input time HTML element, with this line:
<input type="time" id="startTime" value="#DateTime.Now.ToString("HH:mm")" />
I am using C# Razor syntax, but it does not really matter.
I checked it in both Google Chrome and Mozilla Firefox and in both time is represented in 24 hour format. Later, when I shared the code with my colleagues, in their versions of Chrome the time is represented in 12-hour format with AM and PM. Is there a way to specify in my HTML code that time should be represented in one way in all browsers.
There is similar question here, but however it was asked 3 years ago and the accepted answer starts with:
This feature is still in draft. Each browser shows it differently.
so I am wondering if that issue has been resolved in the meantime. If not, any suggestions of good time components are welcome. The simplest way that comes to my mind is to use separate select tags, but I would prefer to use single component which wraps both hours and minutes.
Edit:
I realized the problem is with the local settings of the machine the browser runs on, and after changing the settings on my colleagues' laptops it works fine. I am wondering if there is a way to force all browsers to show time in same format, no matter of the machine's settings. I use those fields in several places, so I would preferably stick to them and not using different HTML components (because I don't want to make too many changes in my code). Another problem I noticed is that the input time field is not like a drop-down list in Mozilla (and in Chrome it is drop-down like).
Shortly, the question now would be: How can I use input time fields and force them to show time in same format in all browsers, no matter on the time settings of the machine they are running on.
Thank you!
It is not related to the browser, but to the system settings.
input type="time" displays the time depending on the regional settings that are defined on the system.
The same applies to dates.
How can I use input time fields and force them to show time in same
format in all browsers, no matter on the time settings
There are plenty of different solutions. The most used is a input type="text". There are also JQuery plugins that can handle that. A js library widly used is moment.js
Related
I would like to use html time picker with a certain interval
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
Link shows that step is supported, however I tried latest Chrome/Edge/Firefox and it doesn't seem to work
<input type="time" id="appt" name="appt" step="300">
Can someone please confirm if its still supported?
https://mdbootstrap.com/docs/b4/jquery/forms/time-picker1/
Use the above time pickers,the UI will be shown consistent in all different browsers platforms and have full customized controls options available,default time picker or date picker have different ui behaviour in different browser and os platforms.
It appears that the HTML time input doesn't support step by itself anymore.
Here's a w3schools article that explains how to apply step with JavaScript instead.
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.
In a Java web project we are using PrimeFaces 4.0 as a JSF extension. Now we ran into a problem with the Spinner (p:spinner) component in PrimeFaces. We embedded the spinner in our own custom tag to set some defaults such as the stepFactor and the locale. The body of the JSF tag looks like this:
<p:spinner id="#{id}" value="#{value}" min="#{min}" max="#{max}" stepFactor="0.1" size="5" onchange="#{onchange}" >
<f:convertNumber pattern="#0.00" locale="de_DE"/>
</p:spinner>
This works fine as for the binding and the rendering of the component. In the following screenshot you see a float 2.6f that was set and properly formatted in the "de_DE" locale (with a comma instead of a dot as the decimal separator).
However, when the user uses the spinners buttons to change the value the formatting immediately gets wrong. The value is even parsed wrong from the component. In the next screenshot you can see the very same spinner once we clicked the "up" button once. Which should actually result in a value of "2,70" being displayed in the component.
Has anybody else had similar problems like this before?
Is there a standard fix to the JavaScript handling the p:spinner component that we can apply here or do we really need to dig into PrimeFaces JS library and fix this on our own?
f:convertNumber is a server-side conversion. The event of incrementing and decrementing the value is JavaScript, the f:convertNumber won't be taken into consideration until the value goes back to server, therefore an ugly JavaScript solution should be done.
I have created a patch for this problem and I used Number.prototype.toLocaleString() to convert the number into a localized version.
All you have to do is include pf.spinner.local.fix.js and set your preferred locale in the following way (in document.ready):
PF('spinnerWidgetVarName').cfg['local'] = 'de-DE';
There are a couple of notes to be taken:
Number.prototype.toLocaleString()
This patch is tested and confirmed on PrimeFaces 5.0 and 4.0
Here's a small example on github and a Demo
Seems like Primefaces Spinner does not support I18N.
A forum message asking to support locales has been posted since 2010 without any answer : http://forum.primefaces.org/viewtopic.php?f=3&t=6398
A possible solution would be to use Primefaces' Extension component timePicker and customize it to manage your value.
See : http://www.primefaces.org/showcase-ext/sections/timePicker/basicUsage.jsf;jsessionid=7axadfz6by4g1787ncndsf12d
And : https://github.com/primefaces-extensions/primefaces-extensions.github.com/wiki/PrimeFaces-Extensions-Locales
Or you could try to mess with JS...
I have created lots of buttons for a large number of pages (usually 5-10 in a row at the bottom of each page inside a table cell) using input type="button" name="..." value="..." onclick="some javascript event handler" etc, basically to link to other pages of the same group. All these pages are ultimately linked from an iframe tag on a single page. The buttons are working fine offline on my PC at least. But, now I've suddenly realized that I haven't used any 'form' tag for these buttons.
So my question is, is this 'form' tag really necessary? Will there by any problem after I upload? I would prefer not to add the form tag now to so many pages if it's not really necessary, because that's going to be a real drag. But, I don't want to suffer afterwards either.
No it is not necessary as long as you are not doing any Get/Post and grouping form elements together. They should work completely fine without a form tag.
There are two issues to be concerened with:
Is it valid HTML?
Turns out that it is valid HTML (see Is <input> well formed without a <form>?), so you are on the safe side here.
Will all common browsers accept it?
After googling around I haven't seen any information on problems wih this use of Input tags. That suggests that all common browsers accept this valid HTML (as they should). When developing any website that is accessible to the general public I would always do a manual cross-browser check to discover any abnormalities certain browsers may habe with my site.
Problem is that you most likely won't be able to tell from looking at your server logs whether certain browsers have a problem with your HTML. It may just not work on IE 6 and you would never be able to find unless a disgruntled customer calls up and informs you.
If this is a generally accessible website get some stats on the most commonly used browsers, decide which ones you want to support, and verify that the website is behaving properly on thiee browsers. This is a pain in the ass, but there is no way I know of to get around that. Browsers may not react to valid HTML properly.
As a rule of thumb, Firefox, Chrome, and Safari unsually behave well, and because of auto-updates most people will have a very recent version installed. If the latest version of the browser works I wouldn't be too concerned that users with some older version will have trouble.
The real test is always Internet Explorer. While version 8 and 9 are pretty standards-compliant, IE 7 certainly needs checking. IE 6 is the worst offender for unusual behavior. It was introduced in 2002, but today still 6% of the population use it! Most of this comes from cracked copies of Windows XP in China, but it is also used quite a lot in corporate networks, where OS and browsers are centrally deployed, and administrators have not managed to progress since early 2000.
In conclusion: Your code is unusual but ok, test it manually on the browsers you expect.
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