Disable date issue in igx-date-picker

[kevalgw]

I have disabled the back date in date picker. it is disabled in calendar.
But it is allowing me to enter the disabled date manually. Is there any way to control this behavior???

I have attached the ss for reference

1. Here the date is disabled as per requirement
   

2. But i am able to enter the disabled date manually by typing
   
   

3. Following is the html tag
   <igx-date-picker
   mode="dropdown"
   [mask]="'dd-MM-yyyy'"
   [format]="'dd-MM-yyyy'"
   formControlName="date"
   [disabledDates]="disabledDate"
   (onSelection)="function($event)"
   (valueChange)="function($event)">
   Dep Date

[RivaIvanova]

Hello @kevalgw,

Using the IgxDatePicker’s disabledDates property gets/sets the disabled dates descriptors and prevents a date to be selected from the dropdown dialog, however, this date could be typed manually in the input field and how this behavior should be handled is up to the developer.

There are a few options depending on your requirement. For example, you could use the readOnly property and set it to true. This would disable the input field and selecting a date could be performed only from the dropdown.

Another approach is using the minValue property along with the validationFailed event which is emitted when the user types an invalid date in the date-picker editor. When this event is emitted a certain action could be performed, e.g., clearing the input field this.datePicker.clear() or selecting the current or another date this.datePicker.select(date).

A similar behavior could be achieved by using the valueChange event which is emitted when the date-picker's value changes.

Here could be found a small sample demonstrating the above approaches. I hope it helps!

[kevalgw]

Hi @RivaIvanova

Is [readOnly] = "true" supported in version 10??

[RivaIvanova]

Hello @kevalgw,

With every new version of Ignite UI for Angular, the developer teams aim to improve the product by providing new features and functionalities, as well as improving the currently available ones and with this in mind, if this property is not recognized in your application, then it is probably introduced in a later version.

Additionally, please keep in mind that version 10.x is considered retired, and I would suggest updating your application to the latest (or a newer and supported one) in order to take advantage of all new features and functionalities. For more information, you can refer to our official Update guide.

However, in case you want to stick to Ignite UI for Angular version 10, I would suggest referring to our official documentation for this version, where you could find detailed information about every component and its properties, methods, events, etc. The documentation for version 10.0.x could be found here.

[kevalgw]

Hello @RivaIvanova

Thanks for the solution