fix(components): fix: update timepicker options when changing locale

[cuongle-hdwebsoft]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

Description

🤖 Generated by Copilot at 4b7a6c4

Add internationalization support to time-select component. Use useLocale and dayjs to format time based on language.

Related Issue

Fixes #___.

Explanation of Changes

🤖 Generated by Copilot at 4b7a6c4

• Import the useLocale hook to access the current language of the time-select component (link)
• Declare the lang constant to store the current language value from the useLocale hook (link)
• Format the currentTime variable according to the current language using the locale method of dayjs in time-select.vue (link)

[pull-request-triage]

👋 @cuongle-hdwebsoft, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

[github-actions]

Hello @cuongle-hdwebsoft, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[btea]

Can you provide an example of the changes before and after the modification?

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=14287
Please comment the example via this playground if needed.

[cuongle-hdwebsoft]

Hi @btea, I just want to add the en and ko dayjs locale on your playground but I don't know how to import them. Could you help me give an example?

Here are these line that I want to add:

import 'dayjs/locale/ko'
import 'dayjs/locale/en'
import dayjs from 'dayjs'

[btea]

Maybe you can refer to this introduction method. playground

You can refer to the dayjs file structure.

[cuongle-hdwebsoft]

I cannot able to import the 'ko' locale, it shows me this error @btea

Failed to resolve module specifier "dayjs/locale/ko".
Tip: edit the "Import Map" tab to specify import paths for dependencies.

Here is my playground link

[btea]

There is a problem with direct introduction, because ko.js has a relative path dependency on dayjs. Maybe you can just copy the content to the playground. For reference only. link

[cuongle-hdwebsoft]

So upset @btea, I don't know why the build code on your playground does not work even though I tried many times. It still worked on my local source. I copied this code from this playground and pasted that in my local source and then it worked.

[cuongle-hdwebsoft]

Here is my code in App.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElConfigProvider } from 'element-plus'
import dayjs from 'dayjs'

var koLocale = {
  name: 'ko',
  weekdays: '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
  weekdaysShort: '일_월_화_수_목_금_토'.split('_'),
  weekdaysMin: '일_월_화_수_목_금_토'.split('_'),
  months: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
  monthsShort: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
  ordinal: function ordinal(n) {
    return n;
  },
  formats: {
    LT: 'A h:mm',
    LTS: 'A h:mm:ss',
    L: 'YYYY.MM.DD.',
    LL: 'YYYY년 MMMM D일',
    LLL: 'YYYY년 MMMM D일 A h:mm',
    LLLL: 'YYYY년 MMMM D일 dddd A h:mm',
    l: 'YYYY.MM.DD.',
    ll: 'YYYY년 MMMM D일',
    lll: 'YYYY년 MMMM D일 A h:mm',
    llll: 'YYYY년 MMMM D일 dddd A h:mm'
  },
  meridiem: function meridiem(hour) {
    return hour < 12 ? '오전' : '오후';
  },
  relativeTime: {
    future: '%s 후',
    past: '%s 전',
    s: '몇 초',
    m: '1분',
    mm: '%d분',
    h: '한 시간',
    hh: '%d시간',
    d: '하루',
    dd: '%d일',
    M: '한 달',
    MM: '%d달',
    y: '일 년',
    yy: '%d년'
  }
};

// @ts-ignore
dayjs.locale(koLocale, null, true);

// import './en.js'

// @ts-ignore
import ko from 'element-plus/dist/locale/ko'
// @ts-ignore
import en from 'element-plus/dist/locale/en'

import Child from './Inner.vue';

const lang = ref('ko');
const localeVal = computed(() => lang.value === 'ko' ? ko : en)

const handleChangeLaguage = () => {
  if(lang.value === 'ko') {
    dayjs.locale('en')
    lang.value = 'en';
  } else {
    dayjs.locale('ko')
    lang.value = 'ko';
  }
}

onMounted(() => {
})
</script>

<template>
  {{ dayjs().locale(lang).format('HH:MM a') }}
  <ElConfigProvider :locale="localeVal">
    <Child />
    <ElButton @click="handleChangeLaguage">Click me</ElButton>
  </ElConfigProvider>
</template>

Inner.vue

<script setup lang="ts">
import { useLocale } from '@element-plus/hooks'
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const { locale: localeEl, lang } = useLocale()

watch([localeEl, lang], (val) => {
  console.log('localeEl', val)
})

const changeTime = () => {}
const format = 'h:mm A'
const time = ref()
</script>

<template>
  <div>Hello Inner</div>
  <div>
    <el-time-select
      :model-value="time"
      @change="changeTime"
      start="00:00"
      step="00:30"
      end="23:59"
      :format="format"
    />
  </div>
</template>

[cuongle-hdwebsoft]

When we changed the locale, the time picker's options did not update, so it still showed the previous locale text. This MR addressed to resolve that problem. I hope that is clear to you.

CleanShot.2023-09-15.at.00.14.34.mp4

[cuongle-hdwebsoft]

Do you have any examples in which Element Plus Component uses dayjs to change locale text? That's could help me a lot. I think there is something wrong with code here, because when we click on the time select, it should show ko string. @btea

[cuongle-hdwebsoft]

Finally, I can reproduce this issue on your playground @btea

Before fix: link
After fix: link

Step to reproduce the issue:

• Open the Timeselect's popover
• Confirm that show en language
• Click on the button to toggle language between en and ko
• Confirm that Timeselect's items do not change language

Step to reproduce the fix:

• Open the Timeselect's popover
• Confirm that show ko language
• Click on the button to toggle language between en and ko
• Confirm that Timeselect's items change language in accordance with the language.

[btea]

I took a look at your code and it seems that you are translating AM and PM. Is that what you mean?

[cuongle-hdwebsoft]

Yes, that's correct @btea.

[btea]

IMO, AM and PM seem to be interchangeable, but the translation seems to be OK as well, what do you think? @ryuhangyeong

[cuongle-hdwebsoft]

Hi @btea,
Should we update anything else?