The html specs are a bit inconsistent about datetime fields:
https://html.spec.whatwg.org/multipage/forms.html#date-and-time-state-(type=datetime)
http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#date-state-(type=date)
even so, it's almost expected that such problem to emerge time to time.
Looking for implementations, i've found a few:
https://github.com/chemerisuk/better-dateinput-polyfill
https://github.com/chemerisuk/better-timeinput-polyfill
But to solve my problem using angular i needed to bind the same attr model on two inputs, and it's bad, since two fields, each one with your own clear button will erase both inputs. Also it is defective on firefox. (please see plunker):
`angular.module("foo",[]).controller("fuzz",function($scope){
$scope.bar=new Date();
$scope.buzz=function(){ alert($scope.bar); };
});`
http://plnkr.co/edit/UAU30vaRwst83jZDL5Nx?p=preview
Is there a better way? will i need to use two fields? does datetime works on mobile?
Any guidance is quite welcome.
Related
Angular UI datepicker altInputFormats does not allow formats that I need. I want to avoid using jQuery.
I need users to be able to input things like:
10JUN16
10JUN2016
AUGUST12
06/12 = June 12th, current year
06-10
061016
But the uibDateParser does not have compatible format codes.
I found a similar issue here but the advice was to change the source code which I'd prefer not to mess with. I'm thinking that some kind of parser in my Angular controller might help?
Any ideas? Here is a plunker I've been playing with
where I have
$scope.altInputFormats = ['M!/d!/yyyy', 'dd.MM.yyyy', 'dd-MMM-yy', 'dd-MMM-yyyy', 'd!-M!-yy'];
But the others won't work.
http://plnkr.co/edit/yNERf1jrtThVvJ1SBjBY?p=preview
I have an application that is in the late stages that uses pickadate.js. It's been reported to me that JAWS does not work with the date picker since the arrow keys are required to select a day and they are already mapped to something else in JAWS.
Is there a good way to get around this issue and still make the datepicker accessible for JAWS users? Any insight would be appreciated. Still learning about accessibility on the web.
If you are using pickadate.js version 3.5.5 then the arrow keys will work properly, however it is using aria-activedescendant to track the currently 'focusssed' date and this is not yet supported in all screen readers (does not work for example on OS X with VoiceOver and as far as I know also does not work with JAWS)
You could change the code https://github.com/amsul/pickadate.js of the datepicker to use ARIA live regions to announce the dates as the user uses the arrow keys. It is based on jQuery and there is a jQuery library that you could integrate to do this:
https://github.com/dylanb/a11yfy
You would essentially call jQuery.a11yfy.assertiveAnnounce(msg); every time the aria-activedescendant changed with the contents of that cell.
An alternate date picker is available here http://freqdec.github.io/datePicker/, it claims to be fully accessible but it also seems to suffer from the arrow keys not working (I tested in NVDA, I suspect JAWS will have the same issue).
However, Look at demo #9 here: http://freqdec.github.io/datePicker/demo/ it features a static date (not a popup) picker which does work with NVDA, it even dutifully announces each date as you use the arrow keys to navigate around the control.
I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.
Does anybody know whats the name of the multi-month selector control used in Mint.com?
I have a video of it been used here. I've come across a lot of date picker and calendar controls but all of them are pretty much the same.
Preferably in jQuery
How about jQuery UI Datepicker? Its widely used and well tested.
It seems to me that this is a control from Qlik softwares (either Qlik Sense or QlikView) that allows users to do such selections. It can be embedded into Mint's solution.
Here's an example:
My Life in Data - Tab Running: https://eu-b.demo.qlik.com/QvAJAXZfc/opendoc.htm?document=qvdocs%2FMy%20Life%20in%20Data.qvw&host=demo11
Note that it is really hard to make sure as the video is not 'browsable'.
Today I've decided to add html5 datalist to certain input via user script. Here's the code. The problem is that list attribute isn't added. If I change it to anything different from list, like lst - it's there.
Is that supposed to be so? Is such behaviour set by specification or by browser?
OK, I did some research on this.
Spec says that input.list returns related datalist object, not the attribute value. So you should use setAttribute('list','edit-subject-themes') on input, which works fine. Seems like it was jQuery issue.
With problem solved, I'll sure use that technique in user JavaScript a lot :)