I am building an HTML5 coded app that will be wrapped for both android and iPhone.
I have a button that should evoke the date/time picker. On iOS this is easy as the picker already exists in one
Android has date and time picker in two different pickers.
Do you have any examples of combining them? Or introducing a flow going from one picker to the other without having two different buttons on the start screen to select from?
What I want is 1 button on the screen: "Select date and time" -> Opens combined picker (or picker flow)
I don't want 2 buttons: "Select date" "Select time" -> here you need to open two pickers independently. One for each button.
Any suggestions, examples and so on are more than welcome.
Thanks.
Every browser renders the native date and time pickers slightly differently.
If you're looking for a consistent solution, you can take a look at the Mobiscroll Date & Time Scroller.
It supports both Android and iOS, and it's themable, so you have even more control on how it looks & feels.
Related
I am porting Firefox addon to Chrome extension and want to use GridView like following on option window.
However, on chrome extension option.html, such GUI cannot be used and only HTML+CSS can be used.
select tag is not solution because multiple columns can't be used.
How can I make gui by HTML+CSS which multiple columns and selecting by row is possible?
I chose Tabulator from jspreadsheets because it has date sort and appropriate events.
P.S.
As of 2020 August, w2ui cannot used for Chrome extension.
I'm developing a web app where I should get time and date through a form. I have tried time but unfortunately it is not compatible with all browser. For example it doesn't work properly in Safari. So which is the best way to get date and time?
Select a time: <input type="time" name="usr_time">
this element doesn't work correctly on Safari
The new HTML 5 input types are very poorly supported right now.
Some options:
You can leave the code as it is and sanity check the input with JavaScript.
Use two input fields as suggested by #HaukurHaf
Use a JavaScript library
Write your own JavaScript
The quickest to get right would be to use a library that uses JavaScript to attach a script to the input field giving the user a better experience with perhaps a clock or other selector to help them.
For example, the JQuery based Time Entry helper by Keith Wood.
I'm working on bug requests for an jQuery Mobile/HTML5 app on Blackberry 10. One of the bugs reported only seems to manifest on the BB10. The bug report is that the datepicker sometimes doesn't show up when the date field (input type=date) is tapped.
After experimenting with this for a while, it appears that, on the BB10, the date picker isn't triggered by the date field having focus, but rather by the the user 'tapping' the field -- and that tap seems to have a bit of time sensitivity.
As an example: if I use jQuery Mobile's "clear button", like so:
<input type="date" name="my-field" value="" data-clear-btn="true" autocorrect="off"
autocapitalize="off" />
I can easily create a scenario where I provide a date and then hit the clear button. The net result is that the date field has focus, but the date picker doesn't automatically appear. Once the form state is like this, it's pretty easy to get the problematic behaviour -- tap and nothing happens.
As I said, above, there seems to be a bit of time sensitivity to the tapping. When trying to give that field focus, some people seem to tap fairly quickly -- jQuery seems to notice the tap and does its magic to apply the "ui-focus" style, but it's still seems to be too quick to get the date picker to intervene. So far, every time I've held my finger down for a full second, I've always had the date picker pop up, but my usual tapping speed is a bit too fast to trigger the date picker (and the QA people certainly seem to have tripped on this a number of times).
My question, then, is: Is there anything I can do about this? Is there an event I can fire on focus that'll trigger the datepicker? Or some kind of configuration I can fiddle with?
I fear that the answer is probably "no" but I wanted to ask.
The iPad defaults to today when an input type="date" gets focus (due to next/previous buttons and I presume tab/shift-tab using bluetooth keyboard) e.g. test using http://jsbin.com/etovur/1 on an iPad.
Question: Is there a workaround that works on both the iPad and iPhone to make the date not default to today when just navigating through the field?
This is a UI problem when editing existing data, and using next/previous to navigate through the fields, because it changes a blank to today e.g. termination date field of an employee gets set to today, and the employee is sacked.
We only need a solution that works on iPad/iPhone, and beware that input type=date implementation between the two devices has significant differences. Desktop browsers don't matter because we use a non-native date control (precisely to avoid problems with variation in how date controls work and look, or whether they are provided). The issue happens on at least iPad with iOS5, and iPhone with iOS6.
Mostly working solution: see http://jsbin.com/etovur/5 - when the date input gets focus set the value to '' after a delay.
setTimeout(function() {
document.getElementById('adate').value = '';
}, 0);
The biggest problem is that this workaround makes it hard for the user to pick today (the user must scroll away from today and back again to pick today). Since this is an effect of the IMHO flawed over-simplified UI of the datepicker on iOS, I don't think there can be any viable solution to my original question.
Some possibility of timing bugs (next then quickly next on slow iPad?).
We are using Mobiscroll (http://code.google.com/p/mobiscroll/) as Date Picker solution in our smartphone product.
It works great in desktop browser, android 2.3, IPhone 4S - any date formats. But, it works in IPhone 5 (version 5.0.1 to be precise) only if date format is yyyy-mm-dd.
Since, the format of date comes from excel sheet, we have no control over there so the picker have to work with variety of formats.
Steps to reproduce the problem:
Setup a page and input type="date" to use mobiscroll. You can use
mobiscroll demo page (http://demo.mobiscroll.com/)
Have any format different than yyyy-mm-dd, lets say mm/dd/yyyy so
put the value of input type="date" as value="09/27/2012".
Open the page in IOS 5.
Expected:
When we click on the date picker, the picker should be loaded with given initial value and we should be able to set it to new value. Also, the format should be preserved even after the setting a new value.
Actual:
The input field comes as empty. The picker shows today's date, and when I click to "Set" in the picker, the value is not set into the input field.
We are using mobiscroll 2.0 rc3.
Possible cause:
I think this issue is some how related to the browser support for the html input type. We tested in Iphone 4S too, there we do not have any issue. What we have found is that Iphone 4S does not support for input type="date" (As checked with Modernizr) but the Iphone 5 has.
We have not yet found the exact location for the fix but we at least feel that cause could be possibly this.
According to HTML5 specification working draft, the date input requieres the value to be in 'yyyy-mm-dd' format (http://www.w3.org/TR/html-markup/input.date.html#input.date)
So I recommend either not using input type="date" or reformat your initial date values. I understand that you have no control over the excel sheet, but you could reformat the dates when reading the values from the excel file.