We Keep Coding

DatePicker in Firefox

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 different browsers input time field shows in different formats

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

HTML 5 input type=“date” not working in Firefox

I am using HTML5 <input type="date" />, which works fine in Chrome and I get the calendar popup to select the date.
But in firefox it acts like a text box and no calendar pops up.
After doing few research I see few solutions using webshims, modenizr, etc... but I do not want to use jQuery.
Is there an alternative for this? How can I make it work in Firefox ?

EDIT: from Firefox 57, <input type="date"/> is partially supported.
Firefox doesn't support HTML5's <input type="date"/> yet.
You have two options:
always use a Javascript datetime picker, or
check if the browser is supporting that tag, if yes use it, if no then fallback on a javascript datepicker (jQuery or some other one).
This is called Feature Detection, and Modernizr is the most popular library for this.
Using always a javascript datepicker is easier and faster but it won't work with javascript disabled (who cares), it will work very bad on mobile (this is important) and it will smell of old.
Using the hybrid approach instead will let you cover every case now, up to the day when every browser will support the HTML5 datepicker, in a standardized way and without needing javascript at all. It is future-proof, and this is especially important in mobile browsing, where the javascript datepickers are almost unusable.
This is a kick off example to do that on every <input type="date"/> element of every page automatically:
<script>
$(function(){
if (!Modernizr.inputtypes.date) {
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'yy-mm-dd'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
It uses jQuery because I use jQuery, but you are free to substitute the jQuery parts with vanilla javascript, and the datepicker part with a javascript datepicker of your choice.

It's now working. Since Firefox 53, you can activate it in about:config by enabling dom.forms.datetype option. See http://caniuse.com/#feat=input-datetime and https://developer.mozilla.org/en-US/Firefox/Experimental_features

`input type="date"` is not supported on mozilla
check the link for list of supported events

I use 6 HTML selectboxes, for the various items, with OPTION statements for the proper values:
year 2000-2050 (or whatever range you choose)
month 1-12 (you can have it show month names)
day 1-31
hour 0-23 (or use 12 midnight - 11 PM, this just changes the display)
minute 0-59
second 0-59 (or just assume 0)
No Javascript needed, although I do use some to avoid invalid selections (like February 30). This is triggered on change of month or year.

What version of firefox you are using.Firefox lower versions less than 30 will not support most of html5 features and html5 input type="date" is not supported on firefox.
For more details please refer:http://caniuse.com/#feat=input-datetime.
The firefox browser doesn't provide full support for html5 but most of the features are supported on versions above 30.
The more convenient was is to use the jquery or bootstrap datetimepicker for selecting date.It will be supported on all browser types.

How to ensure jquery-ui datepicker degrades gracefully to HTML5 date select?

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.

Javascript Time Picker like Windows

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