feat(components): datepicker #6843
Conversation
|
|
| /** | ||
| * Label for "Next month" button | ||
| */ | ||
| @Prop({ reflect: true }) labelNextMonth!: string; |
There was a problem hiding this comment.
All the label props need to be prefixed by text, instead of label.
| }, | ||
| }, | ||
| args: { | ||
| id: 'main', |
There was a problem hiding this comment.
Is this argument necessary in production?
Because for the DEVs the more important attribute will be the name or id attribute on the input fields themself.
There was a problem hiding this comment.
The component shows the native datepicker table (tested in chrome):
To reproduce
- Focus the input field
- Press space
There was a problem hiding this comment.
Hovering a disabled date by mouse causes a wrong visual state (tested in chrome):
There was a problem hiding this comment.
Changing the locale profile, does not update the dateFormat as expected.
I would expect the dateFormat (shown in the input itself) must change when switching from
mm/dd/yyyy(en-GB, en) tomm/dd.yyy(en-US, not implemented) todd.mm.yyyy(de-DE, de) or toyyyy/mm/dd(zh-CN, not available)- ...
See example
Instead it always uses the german format (tt.mm.jjjj) in my browser.
There was a problem hiding this comment.
Change your browser or OS locale settings to see an updated format, this is the native HTML <input type="date">.
| prevHtml: '<button><post-icon size="small" name="2049" ></post-icon></button>', | ||
| nextHtml: '<button><post-icon size="small" name="2050" ></post-icon></button>', |
There was a problem hiding this comment.
I think we should use the chevronleft and chevronright UI icons, no?
| days: `<button aria-label="${this.labelSwitchYear}"><strong>MMMM yyyy</strong><post-icon size="small" name="2052"></post-icon></button>`, | ||
| months: `<button aria-label="${this.labelSwitchYear}"><strong>yyyy</strong><post-icon size="small" name="2052"></post-icon></button>`, |
There was a problem hiding this comment.
We should use the chevrondown UI icon here, right?
There was a problem hiding this comment.
The first and last year in the year view are outgreyed.
There was a problem hiding this comment.
There is some wrong visual states when you select a date range:
After selecting only the start date, before mouse leaves the start date cell
When selecting the end date, the last date has a wrong fg-color
When the selected range overlaps the current date
When the selected range overlaps the focused element, after month change
There was a problem hiding this comment.
Disabled dates are still focussable.
Ignore this message, if this is wanted.
|
@leagrdv and @myrta2302 |
📄 Description
Datepicker functionality implementation
The CSS is temporary and is not 100% accurate to what is expected. It was mainly copied from Myrta's test PR. The actual styling of the calendar will be done in #6304
🚀 Demo
https://preview-6843--swisspost-design-system-next.netlify.app/?path=/docs/eb77cd02-48b2-42e1-a3e4-cd8a973d431e--docs&devModeEnabled=true
🔮 Design review
📝 Checklist