search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

Datepicker older year selection inputbox making empty. no option to disable older years #6606

Closed muruganG closed 2 years ago

muruganG commented 2 years ago

Describe the bug

There is two observation found on related to latest clarity 5 datepicker 1.older year disable option not there.

  1. when i select older years with date combination ,input box going empty. not changed the value of previous value.

How to reproduce

i have shared the step screens you able to reproduce the you documentation datepicker sample also.

Steps to reproduce the behavior:

  1. Go to the clarity 5 documentation datepicker sample try to change the year 950 and try to change the date , when you select the date input box its not showing the date.

Expected behavior

Is there any option we can disable the older years? older year selection should show the selected value.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: ie: Angular 11

Device:

Additional notes

Add any other notes about the problem here. step4

muruganG commented 2 years ago

Step1 Step1

Step2 Step2

Step3 Spet3

Step4 step4

bbogdanov commented 2 years ago

Hi @muruganG,

Seems like we have a logic that doesn't allow years under 999 to be selected. https://github.com/vmware/clarity/blob/648fb89ed867f508c9057a9cc6a835b376a78609/projects/angular/src/forms/datepicker/utils/date-utils.ts#L29

Would you like to give us some clarity about your case?

I also would encourage you to check our Clarity Core datepicker that doesn't give you such restrictions and give you all the freedom to select whatever date you need. https://clarity.design/storybook/core/?path=/story/forms-date--page

muruganG commented 2 years ago

There are two thing need to understand. I went throw the documentation

  1. its allowing to select older years and date if not valid date should not clear previous selected date and year. that is the problem currently facing. (Spet 4 snapshot its cleared existing selected value, because of invalid date and year)
  2. Is there any way we can block older year selection any custom approach?
bbogdanov commented 2 years ago

What I believe it will be the best approach here is to set a min on the input and hook on (ngModelChange) or (change) and maintain the state manually to keep the previous selected inside the input if the new value is not a valid one. The min property will prevent the datepicker to disable older than the min dates to be selected but at the same time it won't prevent manual entrance.

github-actions[bot] commented 1 year ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.