html5 date input and angularjs: localize input format of angularjs validation - javascript

If I create a HTML5 date input like
<input type="date" required ng-model="mydate">
I get a localized input by supported browsers, like
in Chrome, where the German date input pattern dd.mm.YYYY is used. If I open the same page in a browser that does not support those inputs, like IE or Firefox, it is displayed as a regular text input (and that's totally okay). My problem is the form validation of angularjs, that forces the user to enter the date as YYYY-mm-dd.
Is there any way to modify the validation input pattern of Angular.js 1.3 for unsupported browsers to allow the German input pattern? If it is not possible, can the validation of angular.js be completely disabled, so I can validate the input by myself (but still have input[type="date"], so supported browserse show a date picker)?
I have created a Fiddle to demonstrate the issue.

Related

Use same format as <input type="date">

I have 2 inputs in my page, one that is type text, and one that is type date. The input type date as a specific format (the date shown on the input, not the value in the code). I want to use that same format for my input type text across all browsers and all OS. Is there a way I can do this?
You can use Jquery Mask plugin to do that.
https://igorescobar.github.io/jQuery-Mask-Plugin/

Acrobat DC: Unformatted text field with date picker?

In short: I want to use Acrobat DC's built-in date picker on a text field without using Acrobat's Format option.
In full:
I'm trying to enable the date fields in my form to accept a large variety of date formats as input, including a date picker. I've written validation code to accomplish this, however Acrobat is rejecting inputs before the validation code triggers and rewrites the date into an acceptable format. This means that I have to set the field's format to "None" in order for my validation code to fire properly, losing the built-in date picker in the process. While this doesn't make the form not work, it hampers UX, which is something I've been working to strongly improve in this form.
To illustrate the issues:
Ideal/Goal:
Input "May 25, 2017" into Date Field
Validation code converts this to "2017 05 25"
Acrobat formatting applies (expects: "yyyy mm dd"), enabling the date picker
Acrobat Date Picker is available for more rapid input changes
Current Problem:
Input "May 25, 2017" into Date Field
Acrobat formatting applies (expects: "yyyy mm dd"), rejects inputs
Validation code has nothing to work with
Acrobat Date Picker is available for more rapid input changes
Current non-ideal solution:
Input "May 25, 2017" into Date Field
Validation code converts this to "2017 05 25"
Acrobat formatting disabled
No Acrobat Date Picker
I see three possible solutions, but don't know enough on how to (or if I can) achieve them.
Preempt Adobe's built in formatting script somehow. I've tried calling event.change and event.willCommit, but I clearly don't understand them enough to use them properly. Additionally, I thought script precedence was Keystroke > Validation > Format > Calculation, but it appears either I'm wrong or Adobe's built in formats are special.
Force enable the date picker somehow. I don't have high hopes for this. I don't get why Adobe didn't make the damn thing a check box option.
Set the Format option to a wildcard somehow. Like the last three, I don't know if this is possible, but this seems the most likely to work. Basically, let the format accept anything.
You'll need to use two fields. The first one is the main field and uses a custom format script to format your date, not one of the predefined ones. Right beside it is a field formatted for a date that's just wide enough to give you the picker, set it's text color to white so that none of the characters in the value actually show. Use the OnBlur action to update the first field when the user exits the second. If you put them right up against each other, to the end user, they'll appear to be the same field.
In addition to #joelgeraci 's answer, you might also consider a non-Adobe date picker (which requires the very newest versions of Acrobat/Reader anyways). There are a few out there, some better some a bit less…
Shameless plug: yours truly happens to have created the most elaborate and configurable date picker for PDF forms; for more information and quotes, feel free to contact me in private.

How can I validate a field client-side using HTML5 that is read only?

I have an input field that launches a datepicker. To make this work on a mobile device, I've made the field read only. This means that I can launch a date picker on click (or tap) using jQuery, and the tap doesn't open the keyboard on a mobile device.
However - a readonly attribute bypasses the HTML5 validation mechanisms. Can I add something that then either mimics the HTML5 validation look and feel, to keep consistency, or that forces HTML5 validation despite the field being readonly?
Edit: I'm looking for validating that the field is filled in (required) and preferably that it fits a certain date format.
readonly fields cannot have the required attribute, generally they will already contain some value.
Look at the HTML5 Standard Drafts
Try looking at the 'pattern' attribute.
For dates, this pattern might come in handy:
^\d{4}\-\d{1,2}\-\d{1,2}$|^\d{1,2}\/\d{1,2}\/\d{4}$

Create Date input field that works with Firefox

I currently have two input regions that are type="date" and type="time" respectively. I have also noticed that the new html5 input types do not appear to be compatible with Firefox.
How would I go about creating a separate date and time field with appropriate dropdowns. Would this be best as a Jquery/Javascript solution? I am embarassingly lost on how to accomplish this.
date and time input types are not supported in Firefox.
Here is an incomplete list of polyfills:
jQueryUI Datepicker
html5widgets
jonstipe/date-polyfill
jonstipe/time-polyfill

Set a value to an input type=“date” on mobile Safari using JavaScript

I have a JavaScript function that sets the value of <input type="date"/> (Not datetime) from a popup calendar to support browsers that don't have a date picker. When the input is clicked, the calendar pops up and allows dates to be selected.
To prevent the user from typing arbitrary information (although it is validated server side anyway) the field is also read only, which also helps instruct them to use the calendar. All these features rely on JS, so if it is disabled, the date field works as usual.
This works great in every browser except Safari on an iPad/iPhone, which sets the value to nothing. The current format of the date is dd/mm/yyyy. Is there a specific format Safari expects?
You can fake a date field, use an image as a background to a button and set a hidden field with that date.
The final solution I went with (as I could not get Safari to recognize any input) was to change the type to text after attaching all the JavaScript hooks and adding the readonly attribute. This allowed Safari to function just like all other browsers, but still work when JavaScript is disabled.

Categories

Resources