ionic-team / ionic-team/ionic-framework

feat: ion-datepicker to allow future years with simpler option

Open
#30,572 2 comments 1 reaction 0 assignees View on GitHub
community feedback wanted
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 14h
Merged PRs (30d)
50

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

A new flag on `ion-datetime` picker to specifically control the maximum selectable year in the absence of `yearValues` or a `max`.

### Describe the Use Case

The current default only allows for dates with years to be selected in the past. A lot of business logic cases involve both the potential to select both past and future dates to be selected 5, 10, 15 years into the future. Setting this flag allows for the year wheel to allow for future years without specifying a large list of values in yearValues.

Future dates seems to be a really ha

### Describe Preferred Solution

A flag `maxYearValue` to be used as a fallback in the absence of `yearValues` or `max` which allows for the year wheel to have future years simply without an exhaustive `yearList`.

### Describe Alternatives

Currently there is a work around in `yearList` as,

```ts
Array.from({length: 100 + maxYearValue}, (_, i) => new Date().getFullYear() - 100 + i);
```

### Related Code

https://github.com/ionic-team/ionic-framework/blob/5f12cf8c0428ed347bb9753a1dd22088bf46b3b4/core/src/components/datetime/utils/data.ts#L475-L505

This could just need a new flag that's the fallback in between `maxParts?.year` and `year` on line 493

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start in core/src/components/datetime/utils/data.ts around lines 475-505, where the year range falls back between maxParts?.year and year. Trace how the year list is chosen when yearValues and max are absent, then add the maxYearValue fallback so future years are selectable without an exhaustive yearList.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.