I have question, i'm creating project and in them i'm need to create datetimepicker,
standart datetime i can't use because firefox doesn't support this item, jquery i can't use because they didnt work (i guess problem in using jquery items before in my project). Where i can find analogs, please give me some links, or code with example.
Some like this, working only in chrome and IE, but not in firefox :
<input type="datetime-local" name="bdaytime">
Really thanks all for the help!
Do not use type="datetime-local"
Instead use type="datetime"
W3C HTML has dropped input type#datetime-local; "little independent
value & source of potential developer confusion"
Source
Jquery date and timepickers works as charm in all projects. I think, that you have problems with them because of conflicts with other libraries, such as MooTools or prototype.
Read that article about resolving jquery conflicts:
http://api.jquery.com/jquery.noconflict/
And as for dateTimepicker, i recommend:
http://trentrichardson.com/examples/timepicker/
Also, if you really need clock picker (analog clock), you should try and look for http://www.jqueryscript.net/demo/jQuery-Clock-Style-Time-Picker-Plugin-For-Bootstrap-3-clockpicker/
Related
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 writing an application that deals massively with dates.
So, I´m using the new HTML5 input types for datetime, date, month and week...
Surprisingly I found out this is not working on IE10. I´m using IE version 10.0.9200.
To check this out, please open that page: Test Link
My typical input type looks like (I´m using Tweeter Bootstrap as well):
<div class="col-md-8">
<div class="form-group">
<label for="dateTime">Período do Relatório</label>
<input type="date" class="form-control" id="reportDate">
</div>
<script>
var isoString = toLocalIsoString(new Date());
document.getElementById("reportDate").value = isoString.substr(0, 10);
</script>
</div>
And them later I chage the type I need, like:
document.getElementById('reportDate').type = 'week';
or
document.getElementById('reportDate').type = 'month';
In Chrome it works real nice, opening choose windows for the user to choose the month on week, but in IE I get the following error (translated):
0x80070057 - Javascript execution time error. Invalid argument.
So, according to this scenario:
a) I´m doing something wrong here ?
b) If not, how can I support these HTML5 in IE10.
c) If in fact this will not work in IE10, what are the alternatives to have a Chrome like behaviour (popup a small windows so that the user chooses the month, date, week, etc.).
Thanks in advance for any help.
According to Can I Use the date-time input types are not supported by IE. A good alternative would be jQuery UI.
Perhaps Internet Explorer and Firefox do not support it .Check the link here!
http://www.w3schools.com/html/html5_form_input_types.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
For the last link check Browser compatibility at the end of the page
According to quirksmode, the HTML5 advanced form tag features such as dates are not supported very widely.
Date inputs are not supported by majority browsers.
Since you already use Bootstrap in your project I would recommend to use bootstrap-datepicker javascript plugin.
Had this issue with Angular JS (all cool kids use it). Short term fix is to include a script ref to babel-es6-polyfill in your index.html. Looking at typescript for future implementations.
<script src="node_modules/babel-es6-polyfill/browser-polyfill.min.js"></script>
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'.
Anyone knows a javascript alternative to something like:
http://demos.devexpress.com/ASPxGridViewDemos/Filtering/FilterBuilder.aspx
-> click on the condition in the footer of the grid to see the filter
Can be a jquery plugin, jqGrid plugin or anything.
Any suggestion appreciated, thanks.
There is an open source project in Google Code, which meets your requirement. Checkout the demo here:
http://expbuilder.googlecode.com/hg/src/cb/condition-builder.html
Edit: Google Code is no longer active but if you're really interested in trying this old answer, you can download the source code here: https://code.google.com/archive/p/expbuilder/source/default/source
I checked Paramesh solution and found it good enough for me.
However while integrating with project, I found js is rather lacking more modern jQuery features, as well as it can be simplified. So I did.
My alternative solution:
https://github.com/Drachenfels/sql-like-query-builder-for-js
With demo:
https://dl.dropboxusercontent.com/u/196245/condition-builder/condition-builder.html
Maybe someone will find it useful some day.
Feel free to copy/paste/change/suggest fixes/suggest features. ;)
DevExtreme recently released js Filter Builder widget, and it works in different approaches and jQuery also supported. You can see Filter Builder Demo
My issue is. I have jQueryUI in version 1.8.5 and lot and a lot of legacy source code in a project. In legacy code it happens that there is 3ple times registred plugin autocomplete for jquery. However jQueryUI is registring the very same plugin. So when I type into my javascript:
$('#some_id').autocomplete();
It's not actually a jQueryUI.
Any chance to explicit choose UI?
I tried such approach:
jQuery.fn.myautocomplete = jQuery.ui.autocomplete
And then to use in my code:
$('#some_id').myautocomplete();
But this does not work. (Well it was a blind shoot so I did not expect to much.)
Any suggestion how to workaround the problem.
P.S.
Legacy code is blessed by the Pope and cannot be removed for next year or so.
You can:
download jquery.ui without autocomplete
change jquery.ui source
change old plugin source