Skip to content

Commit

Permalink
chore(date-picker): split demo (#2825)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Jan 7, 2024
1 parent 76fe170 commit ae5758d
Show file tree
Hide file tree
Showing 26 changed files with 631 additions and 1,338 deletions.
18 changes: 18 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/datepicker/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<nut-date-picker
v-model="val"
:min-date="min"
:max-date="max"
:three-dimensional="false"
@confirm="confirm"
></nut-date-picker>
</template>
<script setup>
import { ref } from 'vue';
const min = new Date(2020, 0, 1);
const max = new Date(2025, 10, 1);
const val = ref(new Date(2022, 4, 10));
const confirm = ({ selectedValue }) => {
console.log(selectedValue);
};
</script>
19 changes: 19 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/datepicker/date-time.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<nut-date-picker
v-model="val"
type="datetime"
:min-date="min"
:max-date="max"
:three-dimensional="false"
@confirm="confirm"
></nut-date-picker>
</template>
<script setup>
import { ref } from 'vue';
const min = new Date(2020, 0, 1, 10, 40);
const max = new Date(2025, 10, 1, 23, 29);
const val = ref(new Date(2022, 4, 10));
const confirm = ({ selectedValue }) => {
console.log(selectedValue);
};
</script>
26 changes: 26 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/datepicker/filter.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<nut-date-picker
v-model="val"
type="datetime"
:min-date="min"
:max-date="max"
:three-dimensional="false"
:filter="filter"
@confirm="confirm"
></nut-date-picker>
</template>
<script setup>
import { ref } from 'vue';
const min = new Date(2020, 0, 1, 10, 40);
const max = new Date(2025, 10, 1, 23, 29);
const val = ref(new Date(2022, 4, 10));
const confirm = ({ selectedValue }) => {
console.log(selectedValue);
};
const filter = (type, options) => {
if (type === 'hour') {
return options.filter((option) => Number(option.value) % 6 === 0);
}
return options;
};
</script>
42 changes: 42 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/datepicker/format.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<nut-date-picker
v-model="val"
type="datetime"
:min-date="min"
:max-date="max"
:three-dimensional="false"
:formatter="formatter"
@confirm="confirm"
></nut-date-picker>
</template>
<script setup>
import { ref } from 'vue';
const min = new Date(2020, 0, 1, 10, 40);
const max = new Date(2025, 10, 1, 23, 29);
const val = ref(new Date(2022, 4, 10));
const confirm = ({ selectedValue }) => {
console.log(selectedValue);
};
const formatter = (type, option) => {
switch (type) {
case 'year':
option.text += '年';
break;
case 'month':
option.text += '月';
break;
case 'day':
option.text += '日';
break;
case 'hour':
option.text += '时';
break;
case 'minute':
option.text += '分';
break;
default:
option.text += '';
}
return option;
};
</script>
19 changes: 19 additions & 0 deletions packages/nutui-taro-demo/src/dentry/pages/datepicker/hour-minute.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<nut-date-picker
v-model="val"
type="hour-minute"
:min-date="min"
:max-date="max"
:three-dimensional="false"
@confirm="confirm"
></nut-date-picker>
</template>
<script setup>
import { ref } from 'vue';
const min = new Date(2020, 1, 1, 10, 40);
const max = new Date(2020, 1, 1, 23, 29);
const val = ref(new Date(2020, 1, 1, 15, 30));
const confirm = ({ selectedValue }) => {
console.log(selectedValue);
};
</script>
238 changes: 59 additions & 179 deletions packages/nutui-taro-demo/src/dentry/pages/datepicker/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,194 +1,74 @@
<template>
<Demo>
<h2>选择年月日</h2>
<!-- 选择年月日 -->
<nut-date-picker
v-model="state.currentDate"
:min-date="minDate"
:max-date="maxDate"
:three-dimensional="false"
:is-show-chinese="true"
@confirm="confirm"
></nut-date-picker>
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>配合 Popup 使用</h2>
<nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>
<nut-popup v-model:visible="show" position="bottom">
<nut-date-picker
v-model="state.currentDate"
:min-date="minDate"
:max-date="maxDate"
:is-show-chinese="true"
:three-dimensional="false"
@confirm="popupConfirm"
@cancel="show = false"
>
<nut-button block type="primary" @click="alwaysFun">永远有效</nut-button>
</nut-date-picker>
</nut-popup>
<h2>{{ t('pop') }}</h2>
<Pop />

<h2>选择月日</h2>
<!-- 选择月日 -->
<nut-date-picker
v-model="state.currentDate2"
type="month-day"
title="日期选择"
:min-date="new Date(2022, 0, 1)"
:max-date="new Date(2022, 7, 1)"
@confirm="confirm"
></nut-date-picker>
<h2>选择年月日时分</h2>
<h2>{{ t('yearMonth') }}</h2>
<YearMonth />

<!-- 选择年月日时分 -->
<nut-date-picker
v-model="state.currentDate3"
title="日期时间选择"
type="datetime"
:min-date="minDate"
:max-date="maxDate"
@confirm="confirm"
></nut-date-picker>
<h2>选择时分秒</h2>
<!-- 选择时分秒 -->
<nut-date-picker
v-model="state.currentDate4"
title="时间选择"
type="time"
:min-date="minDate"
:max-date="maxDate"
@confirm="confirm"
></nut-date-picker>
<h2>选择时分</h2>
<!-- 选择时分 -->
<nut-date-picker
v-model="state.currentDate4"
title="时间选择"
type="hour-minute"
:min-date="minDate"
:max-date="maxDate"
@confirm="confirm"
></nut-date-picker>
<h2>格式化选项</h2>
<!-- 格式化选项 -->
<nut-date-picker
v-model="state.currentDate5"
title="日期选择"
type="datetime"
:min-date="new Date(2022, 0, 1)"
:max-date="new Date(2022, 10, 1)"
:formatter="formatter"
@confirm="confirm"
></nut-date-picker>
<h2>分钟数递增步长设置</h2>
<!-- 分钟数递增步长设置 -->
<nut-date-picker
v-model="state.currentDate6"
title="时间选择"
type="time"
:min-date="minDate"
:max-date="maxDate"
:minute-step="5"
@confirm="confirm"
></nut-date-picker>
<h2>过滤选项</h2>
<h2>{{ t('monthDay') }}</h2>
<MonthDay />

<!-- 过滤选项 -->
<nut-date-picker
v-model="state.currentDate7"
title="时间选择"
type="datehour"
:min-date="minDate"
:max-date="maxDate"
:filter="filter"
:formatter="formatter1"
@confirm="confirm"
></nut-date-picker>
<h2>{{ t('dateTime') }}</h2>
<DateTime />

<nut-toast v-model:visible="showToast" :msg="msg" type="text" />
</Demo>
</template>
<h2>{{ t('time') }}</h2>
<Time />

<script setup lang="ts">
import { ref, reactive } from 'vue';
<h2>{{ t('hourMinute') }}</h2>
<HourMinute />

const show = ref(false);
const popupDesc = ref();
const msg = ref();
const showToast = ref(false);
<h2>{{ t('format') }}</h2>
<Format />

const state = reactive({
currentDate: new Date(2022, 4, 10, 10, 10),
currentDate2: new Date(2022, 4, 10, 10, 10),
currentDate3: new Date(2022, 4, 10, 10, 10),
currentDate4: new Date(2022, 4, 10, 10, 10),
currentDate5: new Date(2022, 4, 10, 10, 10),
currentDate6: new Date(2022, 4, 10, 10, 10),
currentDate7: new Date(2022, 4, 10, 0, 0)
});
<h2>{{ t('step') }}</h2>
<Step />

const formatter = (type: string, option) => {
switch (type) {
case 'year':
option.text += '';
break;
case 'month':
option.text += '月';
break;
case 'day':
option.text += '日';
break;
case 'hour':
option.text += '时';
break;
case 'minute':
option.text += '分';
break;
default:
option.text += '';
}
return option;
};
<h2>{{ t('filter') }}</h2>
<Filter />
</Demo>
</template>

const formatter1 = (type: string, option) => {
switch (type) {
case 'year':
option.text += '年';
break;
case 'month':
option.text += '月';
break;
case 'day':
option.text += '日';
break;
case 'hour':
option.text += '时';
break;
default:
option.text += '';
}
return option;
};
<script setup lang="ts">
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Pop from './pop.vue';
import YearMonth from './year-month.vue';
import MonthDay from './month-day.vue';
import DateTime from './date-time.vue';
import Time from './time.vue';
import HourMinute from './hour-minute.vue';
import Format from './format.vue';
import Step from './step.vue';
import Filter from './filter.vue';
const filter = (type: string, options) => {
if (type == 'hour') {
return options.filter((option) => Number(option.value) % 6 === 0);
const t = useTranslate({
'zh-CN': {
basic: '选择日期',
pop: '搭配 Popup 使用',
yearMonth: '选择年月',
monthDay: '选择月日',
dateTime: '选择年月日时分',
time: '选择时分秒',
hourMinute: '选择时分',
format: '格式化选项',
step: '分钟数递增步长设置',
filter: '过滤选项'
},
'en-US': {
basic: 'Choose Date',
pop: 'With Popup',
yearMonth: 'Choose Year-Month',
monthDay: 'Choose Month-Day',
dateTime: 'Choose DateTime',
time: 'Choose Time',
hourMinute: 'Choose Hour-Minute',
format: 'Option Formatter',
step: 'Option Steps',
filter: 'Option Filter'
}
return options;
};
const confirm = ({ selectedOptions }: { selectedValue: (string | number)[]; selectedOptions: any }) => {
showToast.value = true;
msg.value = selectedOptions.map((val: any) => val.text).join('-');
};
const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
popupDesc.value = selectedOptions.map((val: any) => val.text).join('');
show.value = false;
};
const alwaysFun = () => {
popupDesc.value = '永远有效';
show.value = false;
};
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 10, 1);
});
</script>
<style lang="scss" scoped></style>
Loading

0 comments on commit ae5758d

Please sign in to comment.