I have an Input of type='time' from Angular Material and I want to use it with 24-hour format. I can't find how to do that.
<md-input-container class="input-material-element">
<input mdInput type="time" placeholder="{{labels.TIME_OF_DEPARTURE}}" [(ngModel)]="model.departureTime">
</md-input-container>
Angular Material does not format the <input type="time">.
That's the browsers implementation / presentation of the HTML5 <input> elements of type time. In some browsers you will get the desired 24-hour format and in some you get 12 hour with AM/PM.
You want to take a look at the documentation to make the appropriate business decision for your use case. Safari for example does not yet support time input natively, while on mobile platforms some browsers even tend to have nice user interfaces for the time input type.
mdn web docs HTML/Element/input/time
Related
I am trying to understand the level of support of <input type="date"> in iOS. I tested it with an iPhone 4 with iOS 7.0.3, even if I specify a min attribute the date picker lets me choose a date before the constraint.
The HTML code is this:
<input type="date" id="checkIn" name="checkIn" class="form-control input-sm" value="2014-05-26" min="2014-05-26" data-date-format="YYYY-MM-DD" data-date-minDate="2014-05-26" placeholder="yyyy-mm-dd">
The data attributes are set for this datepicker but I detect the field support via Modernizr so I'm really sure it does not interfere in any case with the datepicker.
So the question is: did I do something wrong or is the date field lacking constraints support?
I have been having the same issue. It looks like although using <input type="date"> does render a date field. The min attribute is not working.
This website clearly states that there is support lacking.
From the website,
Partial support in iOS refers to a lack of support for attributes like step, min, or max. You have not done anything wrong.
Hope this answers your question.
I'm looking to use the number_field_tag as it works great on mobile devices to allow the user to input with a 10 Key interface. However, the data that they will be entering on their mobile device may contain sensitive information (i.e., part of their Social Security Number).
How can I mask the inputted data as it is being typed while maintaining the 10 Key interface? By using the password_field_tag, it would revert the keyboard to a standard QWERTY.
Not really ruby-on-rails specific, but you could use this in HTML to get a password input that only accepts digits and shows the numeric keyboard on some mobile devices.
<input type="password" pattern="\d*">
I found a CSS solution that works on my mobile. I can use the webkit option to do this.
input[type=number] {
-webkit-text-security: disc;
}
Or for just a particular class as well.
.employee {
-webkit-text-security: disc;
}
Works on Galaxy S4 and Chrome so far with what I've tested.
The best iOS keyboard for entering USD currency values (pictured below) includes numbers 0-9, the decimal symbol, the comma symbol, and the dollar sign. As far as I know, the only way to get this keyboard on Mobile Safari is to use <input type="number">.
Unfortunately, iOS currently has built-in validation for the number input type which screens out commas and dollar symbols. Since this validation "feature" is embedded in the browser and Mobile Safari hasn't yet implemented the novalidate directive, there is currently no way to do this validation manually.
Using <input type="text"> would obviously solve the validation problem, but it also would bring up the regular alpha keyboard, which is not acceptable for my current project (a financial calculator).
I'm on the verge of doing something crazy, like using JavaScript to quickly switch the type from number to text after the input receives focus. I'm grasping at straws here. Any ideas?
For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.
You can use the attribute pattern for your input field as text. This instructs mobile safari to bring up the numeric keyboard. Try something along the lines of:
<input type="text" pattern="\d*" />
Just change your pattern regex to what you want.
Here is more information on the pattern attribute
UPDATE
After reading Apple's Documentation on managing Text in Webviews it seems like you are out of luck. You will have to do some javascript magic to do what you want.
I have a page which has some input type="text" with a jQuery UI datepicker attached, which enters the date in the format "14 Feb 2012" into the field. Great. Now I need to adapt the interface for mobile/small screen. I am having the issue that when an iPhone user taps in the text input, the jQuery datepicker appears, and iOS also shows it's native text input keypad.
I tried using Modernizr to detect for html5 inputtype=date availability and disabling the jQuery datepicker if it's available and switching the input type to "date" so devices which understand this can use their native input. However, this enters the date on the format "2012-02-14" which the back end system does not understand. A lot of work has been done depending on the date arriving in the format "14 Feb 2012".
So if anyone can help, I'm looking for a way to get ONLY the jQuery UI datepicker to appear on all systems, or for a solution which means native date/text inputs can be forced to enter the format "14 Feb 2012".
Unfortunately, the datepicker format can't be overridden due to it being tied to the user's system settings.
What you could do though in fact is have your script do the dynamic switch from type="text" to type="date" based on available technology (e.g. Modernizr.inputtypes.date).
From there you could embed a hidden field and transition the name of the current date field to that hidden field and then parse the date format from the native datepicker into your desired format and set that value of the hidden field.
<input type="date" name="userSetDate"/>
to this:
<input type="date"/>
<input type="hidden" name="userSetDate" value="mm/dd/yyyy"/>
The difficulty would then be parsing the user defined format into your desired format because of the format variations:
10-06-13 --> is that October 6th 2013 or June 10th 2013 ?
Now you could do something that incorproates the top solution with something like styling a label to look like a button, apply an accurate [for] attribute and have the datepicker field be a type="hidden" and apply the datepicker to that.
<label for="fooDate">test</label>
<input type="hidden" name="fooDate" id="fooDate">
<script>
$('#fooDate').datepicker();
</script>
Hope you're (were, noticed the date this was posted) able to figure out!
We're working on a .NET MVC mobile site. I understand that on the iPhone, mobile safari will display a datepicker for the following input field:
<input type="date"/>
We have a standard date picker helper which spits out date picker options for various platforms. In this case we detect mobile safari and then write out an input field that is bound to our model:
<input name="StartDate" value="2008/12/21" type="date"/>
The problem is that the value portion is not shown on load. We can enter in new values, and save them back to our database. But then when we reload the page those values don't show up in the fields. If we save again, our values are all set back to null in the db.
I noticed that when you select a date with the wheels on the iPhone, the value of the text field ends up in the format similar to "Apr 6, 2012" where as I'd expect it to show 2012/04/06 or 04/06/2012.
My guess is that the mobile safari displays a different attribute of the field, and then sets the value attribute appropriately behind the scenes.
Does anyone know what's going on with this? Thanks!
AFAIK the date must be RFC3339 compliant. Have you tried 2008-12-21 (dashed instead of slashes)?
<input type="date" value"yyyy-MM-dd" />