Search code examples
angularangular-reactive-forms

Limit input length within datefield of Angulars reactive form

Within an Angular Reactive form an input field of type datetime-local is used, which provides following format by default: dd.mm.yyyy --:--

Despite this default input format, it is possible to enter the year with up to 6 digits. Is there a possibility to limit the input for the year number to 4 digits?

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

I've tried various things with maxlength and pattern attributes, but haven't found a solution. Can someone help?

Solution

  • If you provide a max property with some date in the future, provided in the correct format, it works:

    <label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30"
  max="2200-01-01T00:00"  />