|
|
@@ -1,19 +1,33 @@
|
|
|
<template>
|
|
|
<div class="demo">
|
|
|
- <h2>选择年月日</h2>
|
|
|
- <nut-cell title="显示中文" :desc="desc1" @click="show = true"></nut-cell>
|
|
|
- <h2>选择月日</h2>
|
|
|
- <nut-cell title="限制开始结束时间" :desc="desc2" @click="show2 = true"></nut-cell>
|
|
|
- <h2>选择年月日时分</h2>
|
|
|
- <nut-cell title="日期时间选择" :desc="desc3" @click="show3 = true"></nut-cell>
|
|
|
- <h2>选择时分秒</h2>
|
|
|
- <nut-cell title="时间选择" :desc="desc4" @click="show4 = true"></nut-cell>
|
|
|
- <h2>格式化选项</h2>
|
|
|
- <nut-cell title="时间选择" :desc="desc5" @click="show5 = true"></nut-cell>
|
|
|
- <h2>分钟数递增步长设置</h2>
|
|
|
- <nut-cell title="时间选择" :desc="desc6" @click="show6 = true"></nut-cell>
|
|
|
- <h2>过滤选项</h2>
|
|
|
- <nut-cell title="时间选择" :desc="desc7" @click="show7 = true"></nut-cell>
|
|
|
+ <nut-cell-group :title="translate('basic')">
|
|
|
+ <nut-cell :title="translate('showChinese')" :desc="desc1" @click="show = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
+ <nut-cell-group :title="translate('mmdd')">
|
|
|
+ <nut-cell :title="translate('setStartEnd')" :desc="desc2" @click="show2 = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
+ <nut-cell-group :title="translate('showAll')">
|
|
|
+ <nut-cell :title="translate('chooseDate')" :desc="desc3" @click="show3 = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
+ <nut-cell-group :title="translate('time')">
|
|
|
+ <nut-cell :title="translate('chooseTime')" :desc="desc4" @click="show4 = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
+ <nut-cell-group :title="translate('format')">
|
|
|
+ <nut-cell :title="translate('chooseTime')" :desc="desc5" @click="show5 = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
+ <nut-cell-group :title="translate('stepMins')">
|
|
|
+ <nut-cell :title="translate('chooseTime')" :desc="desc6" @click="show6 = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
+ <nut-cell-group :title="translate('filter')">
|
|
|
+ <nut-cell :title="translate('chooseTime')" :desc="desc7" @click="show7 = true"></nut-cell>
|
|
|
+ </nut-cell-group>
|
|
|
+
|
|
|
<!-- 选择年月日 -->
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate"
|
|
|
@@ -31,7 +45,7 @@
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate2"
|
|
|
type="month-day"
|
|
|
- title="日期选择"
|
|
|
+ :title="translate('basic')"
|
|
|
:min-date="new Date(2022, 0, 1)"
|
|
|
:max-date="new Date(2022, 7, 1)"
|
|
|
@confirm="
|
|
|
@@ -44,7 +58,7 @@
|
|
|
<!-- 选择年月日时分 -->
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate3"
|
|
|
- title="日期时间选择"
|
|
|
+ :title="translate('chooseDate')"
|
|
|
type="datetime"
|
|
|
:min-date="minDate"
|
|
|
:max-date="maxDate"
|
|
|
@@ -58,7 +72,7 @@
|
|
|
<!-- 选择时分秒 -->
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate4"
|
|
|
- title="时间选择"
|
|
|
+ :title="translate('chooseTime')"
|
|
|
type="time"
|
|
|
:min-date="minDate"
|
|
|
:max-date="maxDate"
|
|
|
@@ -72,7 +86,7 @@
|
|
|
<!-- 格式化选项 -->
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate5"
|
|
|
- title="日期选择"
|
|
|
+ :title="translate('chooseTime')"
|
|
|
type="datetime"
|
|
|
:min-date="new Date(2022, 0, 1)"
|
|
|
:max-date="new Date(2022, 10, 1)"
|
|
|
@@ -83,12 +97,12 @@
|
|
|
}
|
|
|
"
|
|
|
v-model:visible="show5"
|
|
|
- ><nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-datepicker
|
|
|
+ ><nut-button block type="primary" @click="alwaysFun">{{ translate('forever') }}</nut-button></nut-datepicker
|
|
|
>
|
|
|
<!-- 分钟数递增步长设置 -->
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate6"
|
|
|
- title="时间选择"
|
|
|
+ :title="translate('chooseTime')"
|
|
|
type="time"
|
|
|
:min-date="minDate"
|
|
|
:max-date="maxDate"
|
|
|
@@ -103,7 +117,7 @@
|
|
|
<!-- 过滤选项 -->
|
|
|
<nut-datepicker
|
|
|
v-model="currentDate7"
|
|
|
- title="时间选择"
|
|
|
+ :title="translate('chooseTime')"
|
|
|
type="datehour"
|
|
|
:min-date="minDate"
|
|
|
:max-date="maxDate"
|
|
|
@@ -122,7 +136,50 @@
|
|
|
<script lang="ts">
|
|
|
import { toRefs, watch, ref, reactive } from 'vue';
|
|
|
import { createComponent } from '@/packages/utils/create';
|
|
|
-const { createDemo } = createComponent('datepicker');
|
|
|
+const { createDemo, translate } = createComponent('datepicker');
|
|
|
+import { useTranslate } from '@/sites/assets/util/useTranslate';
|
|
|
+useTranslate({
|
|
|
+ 'zh-CN': {
|
|
|
+ basic: '选择日期',
|
|
|
+ showChinese: '显示中文',
|
|
|
+ mmdd: '选择月日',
|
|
|
+ showAll: '选择年月日时分',
|
|
|
+ time: '选择时分秒',
|
|
|
+ format: '格式化选项',
|
|
|
+ stepMins: '分钟数递增步长设置',
|
|
|
+ filter: '过滤选项',
|
|
|
+ setStartEnd: '限制开始结束时间',
|
|
|
+ chooseDate: '日期时间选择',
|
|
|
+ chooseTime: '时间选择',
|
|
|
+ forever: '永远有效',
|
|
|
+ year: '年',
|
|
|
+ month: '月',
|
|
|
+ day: '日',
|
|
|
+ hour: '时',
|
|
|
+ min: '分',
|
|
|
+ seconds: '秒'
|
|
|
+ },
|
|
|
+ 'en-US': {
|
|
|
+ basic: 'Choose Date',
|
|
|
+ showChinese: 'Show Chinese',
|
|
|
+ mmdd: 'Choose Month-Day',
|
|
|
+ showAll: 'Choose DateTime',
|
|
|
+ time: 'Choose Time',
|
|
|
+ format: 'Option Formatter',
|
|
|
+ stepMins: 'Option Steps',
|
|
|
+ filter: 'Option Filter',
|
|
|
+ setStartEnd: 'Limit the start and end time',
|
|
|
+ chooseDate: 'Choose Time',
|
|
|
+ chooseTime: 'Choose Time',
|
|
|
+ forever: 'Forever',
|
|
|
+ year: 'Year',
|
|
|
+ month: 'Month',
|
|
|
+ day: 'Day',
|
|
|
+ hour: 'Hour',
|
|
|
+ min: 'Minute',
|
|
|
+ seconds: 'Second'
|
|
|
+ }
|
|
|
+});
|
|
|
export default createDemo({
|
|
|
props: {},
|
|
|
setup() {
|
|
|
@@ -144,13 +201,13 @@ export default createDemo({
|
|
|
currentDate7: new Date(2022, 4, 10, 0, 0)
|
|
|
});
|
|
|
|
|
|
- const desc1 = ref('2022年05月10日');
|
|
|
+ const desc1 = ref(`2022${translate('year')} 05${translate('month')} 10${translate('day')}`);
|
|
|
const desc2 = ref('05-10');
|
|
|
const desc3 = ref('2022-05-10 10:10');
|
|
|
const desc4 = ref('10:10:00');
|
|
|
- const desc5 = ref('2022年05月10日 10:10');
|
|
|
+ const desc5 = ref(`2022${translate('year')} 05${translate('month')} 10${translate('day')} 10:10`);
|
|
|
const desc6 = ref('10:10:00');
|
|
|
- const desc7 = ref('2022年05月10日 00时');
|
|
|
+ const desc7 = ref(`2022${translate('year')} 05${translate('month')} 10${translate('day')} 00${translate('hour')}`);
|
|
|
const descList = [desc1, desc2, desc3, desc4, desc5, desc6, desc7];
|
|
|
|
|
|
const formatter = (type: string, option) => {
|
|
|
@@ -159,16 +216,16 @@ export default createDemo({
|
|
|
option.text += '';
|
|
|
break;
|
|
|
case 'month':
|
|
|
- option.text += '月';
|
|
|
+ option.text += `${translate('month')}`;
|
|
|
break;
|
|
|
case 'day':
|
|
|
- option.text += '日';
|
|
|
+ option.text += `${translate('day')}`;
|
|
|
break;
|
|
|
case 'hour':
|
|
|
- option.text += '时';
|
|
|
+ option.text += `${translate('hour')}`;
|
|
|
break;
|
|
|
case 'minute':
|
|
|
- option.text += '分';
|
|
|
+ option.text += `${translate('min')}`;
|
|
|
break;
|
|
|
default:
|
|
|
option.text += '';
|
|
|
@@ -179,16 +236,16 @@ export default createDemo({
|
|
|
const formatter1 = (type: string, option) => {
|
|
|
switch (type) {
|
|
|
case 'year':
|
|
|
- option.text += '年';
|
|
|
+ option.text += `${translate('year')}`;
|
|
|
break;
|
|
|
case 'month':
|
|
|
- option.text += '月';
|
|
|
+ option.text += `${translate('month')}`;
|
|
|
break;
|
|
|
case 'day':
|
|
|
- option.text += '日';
|
|
|
+ option.text += `${translate('day')}`;
|
|
|
break;
|
|
|
case 'hour':
|
|
|
- option.text += '时';
|
|
|
+ option.text += `${translate('hour')}`;
|
|
|
break;
|
|
|
default:
|
|
|
option.text += '';
|
|
|
@@ -213,7 +270,7 @@ export default createDemo({
|
|
|
switch (index) {
|
|
|
case 0:
|
|
|
case 6:
|
|
|
- descList[index].value = selectedOptions.map((option) => option.text).join('');
|
|
|
+ descList[index].value = selectedOptions.map((option) => option.text).join(' ');
|
|
|
break;
|
|
|
case 2:
|
|
|
date = selectedValue.slice(0, 3).join('-');
|
|
|
@@ -233,7 +290,7 @@ export default createDemo({
|
|
|
.slice(3)
|
|
|
.map((op) => op.value)
|
|
|
.join(':');
|
|
|
- descList[index].value = selectedOptions[0].text + '年' + date + ' ' + time;
|
|
|
+ descList[index].value = selectedOptions[0].text + translate('year') + date + ' ' + time;
|
|
|
break;
|
|
|
default:
|
|
|
descList[index].value = selectedValue.join('-');
|
|
|
@@ -242,7 +299,7 @@ export default createDemo({
|
|
|
|
|
|
const alwaysFun = () => {
|
|
|
show5.value = false;
|
|
|
- desc5.value = '永久有效';
|
|
|
+ desc5.value = translate('forever');
|
|
|
};
|
|
|
return {
|
|
|
show,
|
|
|
@@ -266,7 +323,8 @@ export default createDemo({
|
|
|
formatter,
|
|
|
formatter1,
|
|
|
filter,
|
|
|
- alwaysFun
|
|
|
+ alwaysFun,
|
|
|
+ translate
|
|
|
};
|
|
|
}
|
|
|
});
|