ngx-bootstrap
ngx-bootstrap copied to clipboard
Issue: datepicker auto change default value when use min, max dates
Is your feature request related to a problem? Please describe.
Issue: there is no need to change the value until the user changes it manually.
Hi, I tried to use the ngx-bootstrap/datepicker with following params: HTML: <input formControlName="MyDate" id="MyDate" type="text" class="form-control" #dpEndDate="bsDatepicker" bsDatepicker [minDate]="avaliable.startDate" [maxDate]="avaliable.endDate" [datesEnabled]="avaliable.enabledDates" container="" [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showClearButton: true, showTodayButton: true }" placeholder="DD/MM/YYYY">
TS: avaliable.startDate = new Date('2021-03-01');// Avaliable range MinDate avaliable.endDate = new Date('2021-04-01'); // Avaliable range MaxDate avaliable.enabledDates = [new Date('2020-01-01')] //My now selected value
Describe the solution you'd like
- I try to open my form. Form is disable and value shown as '2020-01-01' - work as expected.
- I go to edit mode and date-picker automaticaly change the value to '2021-03-01'.
- I Expected the date value stay '2020-01-01' because this date is enabled.
Describe alternatives you've considered
Min max value need ignore enabledDates.
Additional context .NET Core 5 "ngx-bootstrap": "^6.2.0"
We have the similar issue that if the date is not picked but written in the input and the written input is before the minDate or after the maxDate then the diplayed date (input value) is automatically changed to either the minDate or the maxDate respectively.
Before we had the written date stay as is and displayed an warning/error message.
For business users its critical that the value is not changed automatically, I rather expect the dates not to be selectable in the datepicker but still be able to write in the input.
Before this worked, seems to be a bug to me.
To fix current issue after init we remove all validators and use manual validations:
formDetails = new FormGroup({
MyDate: new FormControl(null, [Validators.required])
});
validationMessages = {
MyDate: [
{ type: 'required', message: 'MyDate is required' },
{ type: 'dateOfBirthGreaterToday', message: 'MyDate cannot be greater than today`s date' }
]
};
ngAfterViewInit(): void {
this.resetMinMaxValidators();
}
resetMinMaxValidators() {
this.formDetails.get("MyDate")?.clearValidators();
this.formDetails.get("MyDate")?.setValidators(Validators.required);
}
ngOnInit(): void {
this.formDetails.setValidators([
this.MyDateGreaterTodayValidatorFormGroup()
]);
}
MyDateGreaterTodayValidatorFormGroup(): ValidatorFn {
return (formGroup: AbstractControl): { [key: string]: boolean } | null => {
const fromDateControl = formGroup.get("MyDate");
let errors: ValidationErrors | null = null;
if (fromDateControl?.errors && !fromDateControl.errors.MyDateGreaterToday)
return errors;
if ((fromDateControl?.value !== null) && fromDateControl?.value > this.today) {
errors = { MyDateGreaterToday: true }
fromDateControl?.setErrors(errors);
} else {
fromDateControl?.setErrors(null);
}
return errors;
};
}
encountering this issue, any updates? thanks