Skip to content

Specifying (zzz) in the date format prevents typing an input #6303

Description

@hach-que

Describe the bug
If you set a date picker with a dateFormat that includes zzz for timezone, it prevents typing a date in.

To Reproduce

Create a date picker control, and set the dateFormat accordingly:

<DatePicker
  className="form-control"
  selected={props.eventEnds}
  onChange={onEventEndsChange}
  disabled={props.disabled}
  showPopperArrow={false}
  portalId="date-time-portal"
  showTimeSelect
  timeFormat="h:mm aa"
  dateFormat="MMMM d, yyyy h:mm aa (zzz)"
/>

Then, try typing an input into the date picker and observe the errors in the console:

Uncaught RangeError: Format string contains an unescaped latin alphabet character `z`
    parse parse.js:445
    parseDate index.es.js:239
    handleChange index.es.js:4850
    React 8
    sentryWrapped helpers.js:40
    _wrapEventTarget browserapierrors.js:124
    instrumentDOM dom.js:42
    React 5
    main entry.browser.tsx:369
    startTransition React
    main entry.browser.tsx:368
    async* entry.browser.tsx:377

When this errors happens, the user's input is discarded when they unfocus the control.

Expected behavior
Using the timezone in the date format should not prevent users from typing in a date and time that matches the format.

Desktop:

  • OS: Windows
  • Browser: Firefox
  • Version: 152.0.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions