• 英转中

 一、HTML

 1 <div class="time">
 2   <a-range-picker
 3     :show-time="{ format: 'HH:mm' }"
 4     format="YYYY-MM-DD HH:mm"
 5     separator="至"
 6     :placeholder="['开始时间', '结束时间']"
 7     @change="timeChange"
 8     @ok="onOk"
 9     :locale="locale"
10   >
11     <a-icon slot="suffixIcon" type="calendar" />
12   a-range-picker>
13 div>

二、TypeScript

 1   locale = {
 2     lang: {
 3       timeSelect: "选择时间",
 4       dateSelect: "选择日期",
 5       ok: "确认",
 6       yearFormat: "YYYY",
 7       dateFormat: "M/D/YYYY",
 8       dayFormat: "D",
 9     },
10   };
11   timeChange(value, dateString) {
12     console.log("Selected Time: ", value);
13     console.log("Formatted Selected Time: ", dateString);
14   }
15   onOk(value) {
16     console.log("onOk: ", value);
17   }

三、SCSS

// 日期选择框
/deep/.ant-calendar-picker-input.ant-input {
  display: flex;
  height: 36px;
  line-height: 27px;
  border-radius: 0;
}

官方提供的配置项

 1 {
 2   "lang": {
 3     "locale": "en_US",
 4     "placeholder": "Select date",
 5     "rangePlaceholder": ["Start date", "End date"],
 6     "today": "Today",
 7     "now": "Now",
 8     "backToToday": "Back to today",
 9     "ok": "OK",
10     "clear": "Clear",
11     "month": "Month",
12     "year": "Year",
13     "timeSelect": "Select time",
14     "dateSelect": "Select date",
15     "monthSelect": "Choose a month",
16     "yearSelect": "Choose a year",
17     "decadeSelect": "Choose a decade",
18     "yearFormat": "YYYY",
19     "dateFormat": "M/D/YYYY",
20     "dayFormat": "D",
21     "dateTimeFormat": "M/D/YYYY HH:mm:ss",
22     "monthFormat": "MMMM",
23     "monthBeforeYear": true,
24     "previousMonth": "Previous month (PageUp)",
25     "nextMonth": "Next month (PageDown)",
26     "previousYear": "Last year (Control + left)",
27     "nextYear": "Next year (Control + right)",
28     "previousDecade": "Last decade",
29     "nextDecade": "Next decade",
30     "previousCentury": "Last century",
31     "nextCentury": "Next century"
32   },
33   "timePickerLocale": {
34     "placeholder": "Select time"
35   },
36   "dateFormat": "YYYY-MM-DD",
37   "dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
38   "weekFormat": "YYYY-wo",
39   "monthFormat": "YYYY-MM"
40 }