angular / angular/components

feat(MatDatePicker): adding ability to use flexable format

Open
#27,859 2 comments 1 reaction 0 assignees View on GitHub
area: material/datepicker feature P4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.