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
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;
}
Detailed description
Bug
Steps to reproduce the issue
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)"
};
addAdditionalDays(eventDate) { const endDate = new Date(eventDate); const add365Days = new Date(endDate); add365Days.setDate(endDate.getDate() + 365); return add365Days; }