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.
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 am fairly new to Angular and I am developing an Angular web-app which needs to work across IE11, Chrome and mobile.
I have the following HTML:
<input ng-model="myDate" type="date"/>
Which has the desired behaviour on mobile and Chrome. To make it work on IE11 I have imported HTML5 forms via:
<script src="bower_components/html5Forms.js/shared/js/html5Forms.js" data-webforms2-support="date" data-webforms2-force-js-validation="true" data-lang="qq"></script>
For IE11 this at least brings up a calendar, however if I do
console.log($scope.myDate);
it does not pick up the value that the IE calendar had selected, leading me to believe it doesn't work the angular way. If I gave the input element an ID and use document.getElementById I can retrieve the value. For Chrome it does print out the scope value, and can only assume it does for mobile too.
My question is then how do I make the type="date" work across all 3 instances? Am I perhaps using the html5Forms.js module wrong, or is there an alternative?
I am aware of the type="text" solutions out there and then use https://material.angularjs.org/latest/demo/datepicker, but is that really the only solution I have available? I also need to sometimes use datetime inputs, which the angularjs does not have an example of, however type="datetime-local" works as I want it to, except in IE.
I am using version 1.6.6 of Angular.
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.
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.
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.