ngx-bootstrap icon indicating copy to clipboard operation
ngx-bootstrap copied to clipboard

Issue: datepicker auto change default value when use min, max dates

Open denhaandrei opened this issue 4 years ago • 3 comments

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

  1. I try to open my form. Form is disable and value shown as '2020-01-01' - work as expected.
  2. I go to edit mode and date-picker automaticaly change the value to '2021-03-01'.
  3. 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"

denhaandrei avatar Apr 08 '21 13:04 denhaandrei

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.

daniel-seitz avatar May 07 '21 13:05 daniel-seitz

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;
       };
   }

denhaandrei avatar Aug 11 '21 09:08 denhaandrei

encountering this issue, any updates? thanks

likymm avatar Jun 15 '22 13:06 likymm