diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index 2e53e3e306..35e667eb32 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -226,6 +226,16 @@ export class DatePicker implements @Input() plugins = []; + /** + * The minimum date that a user can start picking from. + */ + @Input() minDate: string | number; + + /** + * The maximum date that a user can pick to. + */ + @Input() maxDate: string | number; + @Input() set flatpickrOptions(options: Partial) { this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options); @@ -240,6 +250,8 @@ export class DatePicker implements plugins, dateFormat: this.dateFormat, locale: languages.default?.default[this.language] || languages.default[this.language], + maxDate: this.maxDate, + minDate: this.minDate, // Little trick force "readonly mode" on datepicker input. // Docs: Whether clicking on the input should open the picker. // You could disable this if you wish to open the calendar manually with.open(). diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index 969921fb4f..9ffcedde91 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -131,6 +131,8 @@ const RangeTemplate = (args) => ({ [warnText]="warnText" [rangeInvalid]="invalid" [rangeInvalidText]="invalidText" + [minDate]="minDate" + [maxDate]="maxDate" [dateFormat]="dateFormat" [value]="value" (valueChange)="valueChange($event)" @@ -153,6 +155,8 @@ const RangeTemplate = (args) => ({ [warnText]="warnText" [rangeWarn]="warn" [rangeWarnText]="warnText" + [minDate]="minDate" + [maxDate]="maxDate" [dateFormat]="dateFormat" (valueChange)="valueChange($event)" [helperText]="helperText"> @@ -162,8 +166,10 @@ const RangeTemplate = (args) => ({ export const Range = RangeTemplate.bind({}); Range.args = { dateFormat: "d/m/Y", - value: ["01/02/24", "08/02/24"], - language: "en" + value: ["02/11/24", "08/11/24"], + language: "en", + minDate: "01/11/24", + maxDate: "30/11/24" }; Range.argTypes = { language: {