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.

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

Add custom validation in DateRangePicker #191

Open
weinnandhasanion opened this issue Aug 9, 2024 · 1 comment
Open

Add custom validation in DateRangePicker #191

weinnandhasanion opened this issue Aug 9, 2024 · 1 comment

Comments

@weinnandhasanion
Copy link

So basically, I want to have a custom format validator (using dayjs) applied to the DateRangePicker where I want to clear the value if an invalid date format is entered. This is doable for the DatePicker since I can easily override the instance's update() method, but how can I do this for the DateRangePicker? Below is a scenario

Valid formats: ['DD MMM YYYY', 'DD/MM/YYYY', 'DD-MM-YYYY'] // 09 Aug 2024, 09/08/2024, 09-08-2024
Display format: 'DD MMM YYYY' (set via format option)

If input is of invalid format:
 Clear field
Else:
 Register value in DD MMM YYYY format

I tried overriding setDates() but it seems like the method isn't being invoked on change, or am I missing something?
Please help. Thanks

@mymth
Copy link
Owner

mymth commented Aug 11, 2024

setDates() has no role in user interaction. It's just like a utility function to programmatically change both dates at once.

Handling user action on a child date picker is fully done by the date picker itself, then after a change is made, the date range picker normalizes the date range (filling/clearing the other side if one side is empty, flipping the dates if end < start) with the changeDate event listener it added to the child input elements. This is why you don't see setDates() being invoked on change.

Although overriding Datepicker's method through DateRangePicker is not possible, you can do something similar like this:
https://codepen.io/mymth/pen/WNqZpGM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants