ElemeFE / ElemeFE/element

[Urgent]. [Component][el-date-picker][Locale][.el-date-range-picker__header][Format]

Open
#22,462 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Existing Component
Yes

### Component Name
el-date-picker

### Description
Hi all, i faced this issue for long time.
Config version in project : VueJS,Nuxt,HTML and typescript.

"@nuxt/typescript-build": "^2.0.2",
"element-ui": "^2.15.6",
"vue": "^2.6.14",
"nuxt": "^2.15.8",
"nuxt-i18n": "^6.28.1",

#Steps to reproduce

Change element locale to `"vi"` for Vietnamese language and click to date picker or range date picker, observe title of calendar popup.

#What is actually happening?
![image](https://user-images.githubusercontent.com/84299779/227412629-f2a91b6d-4410-47de-a09e-743a5e07d04a.png)

Format in header text `" Năm YYYY Tháng MM"` current display on `el-date-range-picker__header` and can't modify or do customize via .scss or .vue although try `":header-format"` or
```
.el-date-range-picker__header {
div::before {
content: 'Tháng ' var(--picker-month) ' Năm ' var(--picker-year);
}
}
```

##What is expected?

Developer can custom or have extend function for el-date-picker to format header

Set **`el-date-range-picker__header`** from date picker should display text format **`"Tháng MM năm YYYY"`(ex: Tháng 1 Năm 2023)** instead current `" Năm YYYY Tháng MM" `(ex: Năm 2023 Tháng 3) in "vi" locale to make UX more comfortable.

#More info

```


.el-range-editor {
width: auto;
height: auto;
position: relative;
}

.icon-clear {
position: absolute;
top: 50%;
right: 4px;
width: 15px;
height: 15px;
transform: translateY(-50%);
background-image: url('~assets/images/icon_clear.svg');
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: center center;
cursor: pointer;
}

```
Please help me take a look ,Thank you.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.