Skip to content

Commit

Permalink
fix(date-picker): trigger validation on min/max date change (vmware-c…
Browse files Browse the repository at this point in the history
…larity#1138)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: vmware-clarity#816  CDE-1584

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: Venkatesh Rajendran <[email protected]>
  • Loading branch information
venkateshr06 and Venkatesh Rajendran committed Jan 22, 2024
1 parent 71bc503 commit b93ce38
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 9 deletions.
10 changes: 10 additions & 0 deletions projects/angular/src/forms/datepicker/date-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,11 +98,13 @@ export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implement
@Input()
set min(dateString: string) {
this.dateIOService.setMinDate(dateString);
this.triggerControlValidation();
}

@Input()
set max(dateString: string) {
this.dateIOService.setMaxDate(dateString);
this.triggerControlValidation();
}

get disabled() {
Expand Down Expand Up @@ -192,6 +194,14 @@ export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implement
}
}

private triggerControlValidation() {
if (this.datepickerHasFormControl()) {
// Set `emitEvent` to false to prevent unnecessary value change event. Status change event will be emitted by `setErrors` below.
this.control.control?.updateValueAndValidity({ emitEvent: false });
this.control.control?.setErrors(this.control.control.errors);
}
}

private populateServicesFromContainerComponent() {
if (!this.container) {
this.dateIOService = this.getProviderFromContainer(DateIOService);
Expand Down
25 changes: 18 additions & 7 deletions projects/demo/src/app/datepicker/datepicker-min-max.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,35 @@
* The full license information can be found in LICENSE in the root directory of this project.
-->

<div clrForm>
<h6>Min/Max Dates</h6>
<p></p>
<h3>Min/Max Dates</h3>
<p></p>
<h6>Reactive Form</h6>
<form clrForm [formGroup]="reactiveDateForm" novalidate>
<clr-date-container>
<label for="dateControl">Date</label>
<input id="dateControl" name="date" type="date" clrDate formControlName="date" [min]="minDate" [max]="maxDate" />
<clr-control-error *clrIfError="'min'">Value must be on or after min date</clr-control-error>
<clr-control-error *clrIfError="'max'">Value must be on or before max date</clr-control-error>
</clr-date-container>
</form>

<h6>Template Driven Form</h6>
<form clrForm>
<clr-date-container>
<label>Date</label>
<input type="date" autocomplete="off" [(ngModel)]="model" clrDate [min]="minDate" [max]="maxDate" />
<input type="date" autocomplete="off" name="model" [(ngModel)]="model" clrDate [min]="minDate" [max]="maxDate" />
<clr-control-error *clrIfError="'min'">Value must be on or after min date</clr-control-error>
<clr-control-error *clrIfError="'max'">Value must be on or before max date</clr-control-error>
</clr-date-container>
<clr-input-container>
<label>Min Date</label>
<input type="text" [(ngModel)]="minDate" clrInput />
<input type="text" name="minDate" [(ngModel)]="minDate" clrInput />
</clr-input-container>
<clr-input-container>
<label>Max Date</label>
<input type="text" [(ngModel)]="maxDate" clrInput />
<input type="text" name="maxDate" [(ngModel)]="maxDate" clrInput />
</clr-input-container>
</div>
</form>

<button class="btn" (click)="toggleMinDate()">{{ minDate ? 'Remove' : 'Add'}} Min</button>
<button class="btn" (click)="toggleMaxDate()">{{ maxDate ? 'Remove' : 'Add'}} Max</button>
Expand Down
6 changes: 4 additions & 2 deletions projects/demo/src/app/datepicker/datepicker-min-max.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
selector: 'clr-datepicker-min-max-demo',
Expand All @@ -15,10 +16,11 @@ export class DatepickerMinMaxDemo {
minDate = '2017-04-01';
maxDate = '2017-04-30';
model = '04/15/2017';
reactiveDateForm = new FormGroup({ date: new FormControl('04/15/2017') });

toggleMaxDate() {
if (this.minDate) {
this.maxDate = '';
if (this.maxDate) {
this.maxDate = null;
} else {
this.maxDate = '2019-11-19';
}
Expand Down

0 comments on commit b93ce38

Please sign in to comment.