Skip to content

Bug - Datepicker - End date validator lacks support for "isSameOrBefore" case #9933

@ibolton336

Description

@ibolton336

Describe the problem
The PatternFly DatePicker component exhibits unexpected behavior when using the toValidator function in a date range selection scenario. The issue arises when the validator condition checks if the end date is greater than the start date (yyyy-MM-DD > yyyy-MM-DD). This results in the selected styles for the end date range not being applied correctly.

Affected Components

  • DatePicker

How do you reproduce the problem?
Steps to reproduce:

  1. Set up a DatePicker component to select a date range.
  2. Implement a toValidator function similar to this:
    const toValidator = (date) => {
        return isValidDate(from) && yyyyMMddFormat(date) > yyyyMMddFormat(from)
          ? ''
          : 'The "to" date must be after the "from" date';
    };
  3. Select a start date at the end of the month.
  4. Open the end date datepicker and observe that the selected styles for the end date range are not applied.

You can reproduce this issue within the PF datepicker demo example.

Expected behavior
The expected behavior is that when selecting a start date at the end of the month, the end date datepicker should show the correct beginning range with selected styles applied.

Is this issue blocking you?
Not blocking.

Screenshots
Screenshot 2024-01-03 at 4 04 10 PM
Screenshot 2024-01-03 at 4 05 50 PM

Environment

  • OS: [e.g. macOS]
  • Browser: [e.g. Chrome]
  • Version: [e.g. 90.0]

Product and Release Date
(Product details and intended release date for the feature using this component)

Additional Information
Upon changing the toValidator function condition from >= to >, the DatePicker component's end date range start selected styles do not apply as intended. It appears the PatternFly DatePicker requires an end date range that starts with the start date for proper functioning.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions