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'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'm building a form using jQuery Mobile but if I use an input filed with the attribute type="number" the numbers entered get formatted using the thousands convention
example:
if I enter 1234567
the number will be converted in to 1,234,567
<input type="number" name="number" id="number" value="">
is there a way to avoid this?
thanks
Most browsers do not do that, but WebKit-based ones (like Chrome), does. Incorrectly, I might add, since I believe it is stated in the HTML5 specification that no such formatting should be done.
This is a major problem for me when it comes to HTML5 input items; that they are not customizable enough and almost unusable in any sort of production environment because of different client behavior. But this (I hope) will get changed as the specification becomes more mature, so that the developer can decide things instead of the browser.
Another example is how required works on some browsers, and how the error message is decided on.
The solution to your problems is to not use type="number", and instead go back to using type="text" and adding the attribute pattern with the regex value of "[0-9]*" which will make it show up as a number input at least on Apple phones. Not on Android, however, I think.
What you could do is check on the requests what kind of client it is, and use different methods depending on that. Like using type="text" pattern="[0-9]*" for iPhone and desktop computers, and type="number" for Android.
I'm using loads of inputs with HTML5 types (such as 'date' or 'time') using the jQuery Tools library. Some browsers (like Opera) automatically recognize that and, for example, transform the <input type="time" /> into a time input.
However, I do not want that behavior (since Opera's time input does not include seconds). Is there any common HTML5 way of disabling such special behavior?
Thanks,
Remo
If you want a time element on Opera to display seconds, add the attribute step="1", you can get milliseconds by setting step="0.1" and step=60 will give you the default hh:mm again. This also works in Chrome (tested in 9.0.597.98 beta).
As most of the commenters on the original question already stated: No, there is no "common HTML5 way" to prevent this behavior.
Even if so, you shouldn't. You're effectivly asking Opera to ignore something you asked for in the first place: a special UI.
I am looking at the custom attributes feature of html 5 here at this link
http://ejohn.org/blog/html-5-data-attributes/
This look like the perfect thing for when I am using jquery/javascript.
My question, Is HTML 5 supported by all the main browsers?
example
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
Various portions of HTML5 are supported by the different browsers, for various definitions of 'supported'.
Several parts work right now, reliably. The data-* attributes you ask about in your question work just fine in every browser, even IE6; however, nobody yet supports the fun "dataset" method to access them. As long as you're fine with just grabbing them by the full attr name, you're golden. I use them to store state all the time in my webapps, as they're the officially blessed method for doing so.
Wikipedia has a good summary of the various support levels across browsers: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
Parts of HTML 5 are supported by Safari, Firefox and Opera, but they are not necessarily incorporating the same parts.
It seems that Firefox is the most ahead, from my experience, but it will be years before the majority of browsers users use will support it.
So, until then we will need to continue trying to use it when we can, in browsers that support the new features, and having workarounds for users that haven't updated yet, or continue to use IE.
Use some services like
http://caniuse.com/
For example for your question - http://caniuse.com/dataset
As you can see all modern browsers support it
Also you can use something like http://modernizr.com/ in your code (it's already included in http://html5boilerplate.com/)
PS: just notified that this question is too old, but it was linked to some other question i checked before
No.
The Wikipedia page "Comparison of layout engines (HTML 5)" does a good job of listing which engines have implemented which parts of HTML5.
There is currently a lot of red boxes on those tables, and that is based on the latest development version, not the version most users will be using.
Full support of HTML 5 is a way off BUT...
Creating custom attributes is nothing new and is likely to work in all the main browsers - but test to be sure that it will work in your case.
We can use HTML 5 now, just not all of it. A lot of HTML 5 is about formalising the way that HTML is currently used and ensuring backwards compatibility - so if a feature works in browsers now, use it.
Almost no web technology is completely supported by any browser; no bugs, quirks or issues.
HTML5 is designed for backwards compatibility, and it will hardly break your site (take <input type=url> for instance - non-supporting browsers show an ordinary text box, Opera lets you select an URL from history/bookmarks). I'd go by the approach: develop, try in the browsers you need to support - if it works, awesome. If not, don't use it. Just like with other specs.
HTML5 isn't even close to being completely supported on any browser yet, and some browsers (notably the IE's) have no intention of supporting it at this time.
no, not yet. wait at least until gecko and webkit support it.
ps: you could use html 5 with data attributes anyway, if you need it for javascript purposes. or choose some other unused attributes (title, abbr, ...others?)
As of August 25, HTML 5 is still a working draft.
http://dev.w3.org/html5/spec/Overview.html