carbon-design-system / carbon-components-angular

An Angular implementation of the Carbon Design System for IBM.
https://angular.carbondesignsystem.com
Apache License 2.0
532 stars 306 forks source link

Date picker is setting incorrect date when typing manually a date that is out of range #1766

Open arcin77 opened 3 years ago

arcin77 commented 3 years ago

Detailed description

Describe in detail the issue you're having.

 When typing manually a date in a date picker input field that has flatpickrOptions set to a specific range. And that date is out of the range, it is expected that the input field is reset and leave it blank. 

  However, it is changing the date to another date that is in the valid range. For example, in my testing I have a date picker with flatpickrOptions = min date -> April 1, 2021, max date -> April 1, 2022. 

  If I type manually the string 'may 20, 2022' or 'may 20 2022' , the date selected is set to 'Dec 20, 2021'

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Date picker

What did you expect to happen? What happened instead? What would you like to see changed?

I would expect that if a date entered manually is out of the date range for the Date picker, the field is reset instead of setting an incorrect date inside that range. 

What browser are you working in?

 Firefox. 

What version of the Carbon Design System are you using?

 carbon-components-angular@4.40.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

 Events Workspace UI - It is an internal IBM tool to manage Marketing Events. Not urgent ship/release dates.

Steps to reproduce the issue

  1. Step one Type in input field 'may 20 2022', the date will be changed to 'Dec 20, 2021'

Additional information

Here is the code of my date picker. <ibm-date-picker [label]="'On-Demand End Date (May not exceed 1 year past the event end date)'" [flatpickrOptions]="onDmndEndDtFlatpickrOptionBuild" [attr.disabled]="enabledOnDemandDate" [placeholder]="'MMM dd, yyyy'" [invalid]="formSubmitted && !briefGroup.get('onDmndEndDt').valid" [invalidText]="onDemandEndDateInvalidText" [dateFormat]="'M d, Y'" [value]="onDmndDateInitialValue" [skeleton]="loading" id="onDmndEndDt-datepicker2" formControlName="onDmndEndDt" [attr.readonly]="!editable.user" (valueChange)="onDemandDateChange($event)"

  You can reproduce using any options for attributes 'label', 'invalid', 'invalidText', etc, only flatpickrOptions set it to: 
  onDmndEndDtFlatpickrOptionBuild = {
minDate: new Date(),
maxDate: this.addAdditionalDays(new Date())

};

addAdditionalDays(eventDate) { const endDate = new Date(eventDate); const add365Days = new Date(endDate); add365Days.setDate(endDate.getDate() + 365); return add365Days; }

zvonimirfras commented 3 years ago

This looks like it's incorrectly parsing the date because of the unusual (to flatpickr) format.

Have you tried passing parseDate function to flatpickr in which you parse the date correctly?