ElementUI calendar component (DatePicker), when switching between Chinese and English, the text does not change

Posted May 27, 20202 min read

IMG_4482.PNG
IMG_4483.PNG

When switching languages, some remaining text was not processed(week in the picture).

window.location.reload

The simple and crude method is to use window.location.reload()
But the user experience is not so good.

v-if

I tried to use this. $Forceupdate() after the language changed, it didn't work.
Give the component a ref attribute, and thenthis. $Refs.datePicker. $ForceUpdate(), which is also useless:(

Then in the developer tools, write "111" after the number "one", and then switch the language, the "111" I wrote is still there. Add "111" after "OK" and then switch the language. "111" is gone, and "OK" becomes "OK".

The text of the week in this place should be written in the js code, and it has not been regenerated after switching the language.

Try to give the datePicker component v-if, then switch the display to hide, force it to re-render once, it is normal ~

The code is like this:

<span class = "date-picker-placeholder">
    <el-date-picker v-if = "isDatePickerVisible"
        v-model = "date [0]"
        type = "datetime"
        @ change = "handleTimeChange"
        :picker-options = "datePickerStartOptions"
        :placeholder = "$t('placeholder.startTime')">
    </el-date-picker>
</span>

  watch:{
    language() {
        this.isDatePickerVisible = false
        this. $nextTick(() => {
            this.isDatePickerVisible = true
        })
    }
  }

When switching between display and hide, the height of the parent element may change when it is hidden, and the left or right element may float over, causing the page to flicker. You can give the el-date-picker tag a placeholder parent element and set a fixed width and height. Flashed.

.date-picker-placeholder {
    width:190px;
    height:32px;
}