how to conditionally add mydatepicker disablescince prop only for a particular field in angular

Question

present mydatepicker options are as below: in ts file

myDatePickerOptions: IMyDpOptions = {
    // other options...
    dateFormat: 'dd-mmm-yyyy',
    editableDateField: false,
    openSelectorOnInputClick: true,
};

html file:

<my-date-picker
    #subjectdob="ngModel"
    editableDateField="false"
    maxlength="10"
    name="subjectdob"
    [(ngModel)]="serviceRequestFormDetails.srfSubjectDetails.dateOfBirth"
    [options]="myDatePickerOptions"
    required
></my-date-picker>

where as in html file i am having multiple date pickers and for only dateofibirth field i want to use disableSince prop got struck here.can any one help me to achieve this?

Answer 1

Create another IMyDpOptions object and extend the common properties using spread operator and add the extra disableSince property to the variable

  myDatePickerOptions: IMyDpOptions = {
    // other options...
    dateFormat: "dd-mmm-yyyy",
    editableDateField: false,
    openSelectorOnInputClick: true
  };

  myDOBDatePickerOptions: IMyDpOptions = {
    ...this.myDatePickerOptions,
    disableSince: { year: 2020, month: 10, day: 27 }
  };

use myDOBDatePickerOptions for only the dateofibirth field

<my-date-picker
  #subjectdob="ngModel"
  editableDateField="false"
  maxlength="10"
  name="subjectdob"
  [(ngModel)]="serviceRequestFormDetails.srfSubjectDetails.dateOfBirth
  [options]="myDOBDatePickerOptions"
  required
></my-date-picker>