Ant-Design-Vue:a-range-picker组件国际化配置

        在使用Ant-Design-Vue中的时间范围选择器开发个人项目时,发现默认显示为英文。如何解决呢?

Ant-Design-Vue:a-range-picker组件国际化配置_第1张图片

date-picker分类

        Antd-Vue提供了DatePicker、MonthPicker、RangePicker、WeekPicker 几种类型的时间选择器,分别用于选择日期、月份、日期范围、周范围。

Ant-Design-Vue:a-range-picker组件国际化配置_第2张图片

        示例代码如下,


问题复现

        配合form表单简单使用的化,没有什么大问题,但是,当添加了show-time的属性时,发现左下角显示了英文的按钮。Ant-Design-Vue:a-range-picker组件国际化配置_第3张图片

解决方法

        Antd-Vue官网介绍如下:

Ant-Design-Vue:a-range-picker组件国际化配置_第4张图片

 

        即:默认情况下,该框架提供的日期组件默认都使用了英文模式显示文本,查看默认配置如下,"locale": "en_US",那么我们就要修改其locale参数,将其转换为中文模式。

{
  "lang": {
    "locale": "en_US",
    "placeholder": "Select date",
    "rangePlaceholder": ["Start date", "End date"],
    "today": "Today",
    "now": "Now",
    "backToToday": "Back to today",
    "ok": "OK",
    "clear": "Clear",
    "month": "Month",
    "year": "Year",
    "timeSelect": "Select time",
    "dateSelect": "Select date",
    "monthSelect": "Choose a month",
    "yearSelect": "Choose a year",
    "decadeSelect": "Choose a decade",
    "yearFormat": "YYYY",
    "dateFormat": "M/D/YYYY",
    "dayFormat": "D",
    "dateTimeFormat": "M/D/YYYY HH:mm:ss",
    "monthFormat": "MMMM",
    "monthBeforeYear": true,
    "previousMonth": "Previous month (PageUp)",
    "nextMonth": "Next month (PageDown)",
    "previousYear": "Last year (Control + left)",
    "nextYear": "Next year (Control + right)",
    "previousDecade": "Last decade",
    "nextDecade": "Next decade",
    "previousCentury": "Last century",
    "nextCentury": "Next century",
    "shortWeekDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    "shortMonths": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  "timePickerLocale": {
    "placeholder": "Select time"
  },
  "dateFormat": "YYYY-MM-DD",
  "dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
  "weekFormat": "YYYY-wo",
  "monthFormat": "YYYY-MM"
}

        查看官网给出的例子,我们进行修改,


         可以看到,已经显示为中文,

Ant-Design-Vue:a-range-picker组件国际化配置_第5张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)