I created a form. It is having time inputs and date inputs. Date input is working fine. I can choose the date from dropdown. But time can't be selected through dropdown. There is no dropdown working at time input. Only tome icon is showing. I want to have a dropdown for time inputs as date inputs.
How can I do this?
The short answer is that at time of this writing, Orbeon Forms doesn't come out-of-the-box with a control that allows users to select a time through dropdowns on a desktop browser. So for now users will have to type the time in a text field.
On mobile browsers, you'll get the equivalent of dropdowns on that platform (iOS or Android), as shown in the screenshots on this very old blog post on the topic.
On desktop browsers, this is covered by request for enhancement #4252.
Related
NVDA Screen reader doesn't read items of dropdowns with search when user is hovering them or focusing them with Tab key. Instead it is reading the content of search field. Is it a known issue? Will that be changed in future releases?
Here is an trivial example:
https://demo.orbeon.com/demo/fr/orbeon/builder/edit/785b85a843a9910091915ecab6a12a83a8281cc9
Indeed, and unfortunately this is due to issue #3735 of Select2, the component used by Orbeon Forms for the dropdowns with search. On the Orbeon Forms side, this is tracked as issue #4854.
Currently the datepickers trigger the default iOS datepicker with dd-mm-yyyy format. I would like it to trigger the dddd-dd-mm-yyyy format so users are better at picking the correct date because they can see the actual day of the week.
Is this possible for a mobile website?
I'm not sure about doing it for mobile website. But we can change format of default iOS date picker if you want. It's directly not possible through date picker. There is another component called UIPickerView in iOS, through which we can achieve this. Check how to create UIPickerView for mobile website and place the values you want in pickerView.
So after doing more research on the subject I have found that it is possible to use datetime-local. This triggers the native datepicker with ddd-dd-mm format but also accounts for the year (so scrolling over december 31 will make the date object move to the next year). This workaround has issues with IE though, so is not a universal solution.
I'm working on an html 5 business application and someone just discovered something weird in Beta testing that I can't find an answer to.
We have a form with date/time input on it:
<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29">
In Safari / Chrome or Firefox browser in iPad or iPhone (IOS 9.02 just confirmed but older versions as well) when I click on the input field it correctly brings up the native date/time picker, however there is no facility to change the year.
It's just not an option at all. Am I missing something fundamental or is this a bug in IOS? Note that this works fine in all other platforms we've tested on with Chrome / FireFox, just not on IOS with it's native picker.
Support for the full range of date type inputs is not yet available in the majority of browsers hence the issue you are getting here. In order to use them, one solution is to utilize a polyfill that provides functionality that the browser does not support.
http://html5please.com/#date
An example is the forms polyfill from the webshims library.
$.webshims.polyfill('forms forms-ext');
Then it is possible to select the year when using your example above.
Webshim link:
http://afarkas.github.io/webshim/demos/
Configurator https://afarkas.github.io/webshim/demos/demos/cfgs/input-datetime-local.html#min=&max=&list=&step=&value=&startView=0&minView=0&stepfactor=&useDecadeBase=0&startValue=&calculateWidth=on&popover=&popover=&popover=
and fiddle https://fiddle.jshell.net/trixta/VNuct/light/ from the developer provide additional information on the use of webshims.
It is NOT a bug. As the Safari Developer Library states, the following values are only valid for datetime-local picker:
date. An input control for specifying a date value. The user can select a month, day of the month, and year. Unlike datetime, date
does not offer the time of day.
datetime. An input control for specifying a date and time value. The user can select a month, day of the month, year, and time of
day.
datetime-local. An input control for specifying a date and time value where the format depends on the locale.
You can find the whole documentation here:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/InputTypes.html
I would suggest you to combine date and datetime input fields in order to adapt your app for iOS browsers.
Add min/max attributes to enable scrolling to different years.
<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29" min="1970-01-01T00:00" max="2030-01-01T00:00">
https://codepen.io/oriadam/pen/pxvqNE
I use input type "date" with jquery mobile. But for each device it display different result.
+ Android operating system: choose input date the same type of android calendar
+ iOS: choose input date date the sam type of iOS
+ Desktop: choose input date the same type of operating system install on desktop
I want display dd/MM/yyyy format standard for all device. How to custom format default input date???
Thank you so much!
You can do this, but this is too much of a waste of time and involves cumbersome use of HTML5's localStorage api. For more info, look at this question. In this case also, it's not possible to make type=date behave uniformly in all browsers because each browser handles this differently and you don't have any control over it.
HTML5's standards indicate usage of YYYY-MM-DD format but the browsers sniff your local date format and use that. See this from w3:
The format used "on the wire", i.e. in HTML markup and in form submissions, is intended to be computer-readable and consistent irrespective of the user's locale. Dates, for instance, are always written in the format "YYYY-MM-DD", as in "2003-02-01". Users are not expected to ever see this format.
and this question at jquery Mobile site.
All this must tell you that doing this will take a lot of effort from you. Instead, it would be better if you use some other alternative to this, taken from this question like this : http://jsbin.com/ukelis/1/edit
you could change the dateformat in the altFormat option in the JS and make this work for you. You could also look at this - a mobile version for jquery UI's datepicker.
I need to ask users of my jquery mobile web site to select a date range.
I can't find any suitable jquery-mobile plugin. I looked for a lot of plugins for date-time picking (the most promising to me being "jQM-DateBox"), but no one seems to allow for a date range.
Any suggestion?
As far as i know there isn't any plugin which provides date ranges until now.
The available date plugins for jQM are
The jQM-Datebox
The MobiScroll
In my opinion the most common way is to use two dateboxes, one for the start date and one for the end date. Initially the end date will be deactivated. The user will select the start date and using the change event you will have to complete the end date with the same date as the selected start date. Afterwards the user will have the option to modify the end date or not.
Im not sure how it works in jQuery Mobile but you could try jQuery UI DateRangePicker (much of jQuery ui is in jQuery Mobile) ...
http://tamble.github.io/jquery-ui-daterangepicker/
Ill be interested to know the outcome.