Unable to submit form if "disableUntil" set under "IAngularMyDpOptions" options?

[lakhvir1994]

Hello!

When I bind date picker with form and "disableUntil" was set to yesterday date under "IAngularMyDpOptions". So when I try to submit form (formName.valid) then it gives validation error on date field bit I didn't add any validation on the date field.

Thank you.

[kekeh]

Hello @lakhvir1994

Can you create a demo here https://stackblitz.com/ about the issue?

[lakhvir1994]

Hello,

I just uploaded the demo app on github, please download the app and check the issue.

https://github.com/lakhvir1994/Datepicker-demo

[kekeh]

Validation error occurs when you are trying to initialize a datepicker with a disabled date. Disabled date is recognized as an invalid date in a validation.

// Initialize to today (not disabled date) works ok
setPastDate() {
   let model: IMyDateModel = {isRange: false, singleDate: {jsDate: new Date()}, dateRange: null};
   this.demoForm.controls['date'].setValue(model);
}

[lakhvir1994]

Thank you for you response, Let me explain you that how our system is working and what is our requirement.

We have a "Coupon" add/edit form and we disable the past dates so user can not select the past dates while add/edit the coupon. So let me explain you with an example, Just imagine that while creating (add) coupon the date was 25th of December so I set the date to 26th, so it allowed me to set that date but after some days I need to update some of the values in the coupon. So I go again to that coupon on 30th then it wont allow me to update the coupon just because of the date we set at the time of addition was gone under disable dates.

So is there any way that I can submit the form without updating the date?

[kekeh]

I think you can try to do it as follows. The code below is not tested, but it shows the idea. In the edit case the selected date is enabled so the submit of form should work.

public options: IAngularMyDpOptions = {
   dateFormat : 'mm/dd/yyyy',
   disableUntil : {year: 0, month: 0, day: 0},
   enableDates: [],
   maxYear: 2050
};

addCase: boolean = true;

/*
   Inits component (Angular lifecycle method).
*/
ngOnInit(): void {
   if (this.addCase) {
      this.handleAddCase();
   }
   else {
      const selectedDate: IMyDate = this.getSelectedDate();
      this.handleEditCase(selectedDate);
  }
}

/*
   Handles add case:
      - disable until yesterday
      - remove possible enabled dates
*/
handleAddCase(): void {
   let copy = this.getCopyOfOptions();

   // disable until yesterday
   let d: Date = new Date();
   d.setDate(d.getDate() - 1);
   copy.disableUntil = {year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate()};

   // remove possible enabled dates
   copy.enableDates = [];

   this.options = copy;
}

/*
   Handles edit case:
      - disable all dates
      - enable selected date which is selected in add case
      - prevents user to change the selected date
*/
handleEditCase(selectedDate: IMyDate): void {
   let copy = this.getCopyOfOptions();

   // disable all possible dates (until the value of maxYear of options)
   copy.disableUntil = {year: 2050, month: 12, day: 31};

   // enable the selected date
   copy.enableDates = [selectedDate];

   this.options = copy;

   // sets the initial date
   let model: IMyDateModel = {isRange: false, singleDate: {date: selectedDate}, dateRange: null};
   this.demoForm.controls['date'].setValue(model);
}

/*
   Returns copy of options.
*/
getCopyOfOptions(): IAngularMyDpOptions {
   return JSON.parse(JSON.stringify(this.options));
}

/*
   Return selected date (selected in add case)
*/
getSelectedDate(): IMyDate {
 // TODO: add code
}