feat: support the pattern property on date inputs

[calendee]

Feature Request

Ionic version:

[x] 5

Describe the Feature Request The Ionic ion-input supports the pattern property for some field types:

https://ionicframework.com/docs/api/input

It would be great for it to also support pattern for date field types. This would be very helpful because desktop Safari does not have support for the date field type as other browsers do. Therefore, users can enter anything into these fields and not generate a proper date in state or when the form is submitted.

Describe Preferred Solution Allow the date input type to support the pattern property like other field types do so that the following HTML is outputted:

<input 
class="native-input sc-ion-input-md" 
aria-labelledby="ion-input-4-lbl" 
autocapitalize="off" 
autocomplete="off" 
autocorrect="off" 
name="ion-input-4" 
placeholder="" 
type="date" 
pattern="\d{4}-\d{2}-\d{2}">

Describe Alternatives: Related Code Example:

<IonInput
  type="date"
  value={lastVisit}
  required
  pattern="\d{4}-\d{2}-\d{2}"
/>

Additional Context NOTE: MDN demonstrates the use of pattern to handle browsers that do not support the date field type.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

[liamdebeasi]

Thanks for the feature request. Can you clarify the issue that you are running into? Ionic Framework has full support for the date input type along with the pattern prop. Under the hood, we are just using the native input element.

[calendee]

Thanks for getting back to me and sorry for the slow reply.

The problem is that desktop Safari on macOS does not support the date input type. So, you get none of the nice browser functionality like a date picker or input masking that Chrome, Firefox, etc give. So, a user can type anything into a date field in desktop Safari.

Ionic does not support the pattern prop on fields with a type attribute of date:

So, this means you can't enforce a pattern on something like <IonInput type="date" />

To overcome this, I've resorted to detecting if the browser can support the date input type. If it can, I use a regular IonInput. If it can't, I fake an IonInput by putting a real <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> inside a label and make it look decent with a bit of JavaScript.

If you can point me to a Ionic React start template on StackBlitz or Codepen or wherever y'all are keeping them this day, I can throw together a sample.

[liamdebeasi]

Thanks for the follow up. The docs are wrong. You can use pattern with type="date":

<IonInput type="date" pattern="\d{4}-\d{2}-\d{2}" />

I will put up a PR to address this in the docs.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21067 and an update should be on the docs for the next release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.