feat(MatDatePicker): adding ability to use flexable format
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Feature Description
I'm just wondering if we can add the feature of dateFormat to the datepicker
datepicker-input-base.ts
```
@Input displayFormat: string|undefined|null;
@Input parseFormat: string|undefined|null;
```
and in the code:
```
protected _formatValue(value: D | null) {
**const format = this.displayFormat ?? this._dateFormats.display.dateInput;**
this._elementRef.nativeElement.value =
value != null ? this._dateAdapter.format(value, **format**) : '';
}
_onInput(value: string) {
const lastValueWasValid = this._lastValueValid;
**const format = this.parseFormat?? this._dateFormats.parse.dateInput;**
let date = this._dateAdapter.parse(value, **format** );
// ... remaining code
}
```
### Use Case
in this case we can alow different pasing/display format in the same app
the first input will use custom format and the second one use the default one.
both are in the same component
```
Choose a date
DD/MM/YYYY
Choose a date
MM/DD/YYYY
```
Contributor guide
Research direction
Start in datepicker-input-base.ts and trace _formatValue and _onInput through the date adapter and existing date-format configuration. Define the per-input displayFormat and parseFormat behavior described in the examples, then verify that custom and default formats coexist without changing the default path.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100