Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: added minDate and maxDate checks in the datepicker #3060

Merged
merged 6 commits into from
Nov 25, 2024
Merged

chore: added minDate and maxDate checks in the datepicker #3060

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0533ce7
fix: added minDate and maxDate in the datepicker
rkkp1023 Nov 15, 2024
384472f
chore: address review comments
rkkp1023 Nov 20, 2024
4f70d24
chore: fix formating
rkkp1023 Nov 20, 2024
5f92ef0
Update src/datepicker/datepicker.component.ts
Akshat55 Nov 25, 2024
42526bc
chore: lint fix
Akshat55 Nov 25, 2024
c428711
Merge branch 'master' into issue-3059
Akshat55 Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/datepicker/datepicker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @rkkp1023, this was intentionally excluded. At the time of the component creation, it was decided that we weren't going to create explicit wrapper inputs due to the possibility of changes upstream (flatpickr). If we start adding flatpickrOptions as inputs, we will then need to add ALL.

Instead, please pass the maxDate/minDate as part of the flatpickrOptions.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @Akshat55, Added flatpickerOptions in the storybook

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Akshat55, Q: why the Carbon Angular implementation needs to differ from other implementations - both React and Web Component implementations support minDate/maxData as input properties.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We tend to follow React implementation for the most part, however there are certain components that we decided to not 100% follow in terms of implementation. Date picker is one of those components.

Date picker is dependent on a third-party library (flatpickr), so it doesn't make sense for us to add all of those inputs/outputs in case there is a change in flatpickr.

In such case, to resolve this, we would need to phase it out via breaking changes, so the reasonable thing to do on our end was allow for a user to pass in a flatpickr options object.

That being said, I definitely think we do need to improve our storybook documentation to better showcase this.

@Input()
set flatpickrOptions(options: Partial<Options>) {
this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);
Expand All @@ -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().
Expand Down
10 changes: 8 additions & 2 deletions src/datepicker/datepicker.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,8 @@ const RangeTemplate = (args) => ({
[warnText]="warnText"
[rangeInvalid]="invalid"
[rangeInvalidText]="invalidText"
[minDate]="minDate"
[maxDate]="maxDate"
[dateFormat]="dateFormat"
[value]="value"
(valueChange)="valueChange($event)"
Expand All @@ -153,6 +155,8 @@ const RangeTemplate = (args) => ({
[warnText]="warnText"
[rangeWarn]="warn"
[rangeWarnText]="warnText"
[minDate]="minDate"
[maxDate]="maxDate"
[dateFormat]="dateFormat"
(valueChange)="valueChange($event)"
[helperText]="helperText">
Expand All @@ -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: {
Expand Down
Loading