element plus 日期组件中英文切换

现在的项目需要做中英文切换功能，我发现element plus 只有日期组件不能转换，然后上网查了一下并结合自己的方法写了出来。
代码：

<template>
  <!-- 日期框组件 -->
  <div class="time-box">
  //:locale="locale"绑定locale属性
    <el-config-provider :locale="locale">
    <el-date-picker 
      type="daterange"
      range-separator="~"
      :start-placeholder="$t('leftMenubar.leftMenubarStartdate')"
      :end-placeholder="$t('leftMenubar.leftMenubarEnddate')"
      style="width: 260px"
      v-model="timevalue"
      @change="Datachange"
      popper-class="popperClass"
      value-format="YYYY-MM-DD"
    >
    </el-date-picker>
  </el-config-provider>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
//引入中文和英文
import zhLocale from 'element-plus/es/locale/lang/zh-cn'
import enLocale from 'element-plus/es/locale/lang/en'
// 日期
const timevalue = ref(null);
//这是关键代码，我是将中英文切换字段存储在本地
const locale=ref(localStorage.getItem('lang')=='zh'?zhLocale:enLocale) ;

</script>