hookehuyr

✨ feat(日期选择控件): 控件控制可选最大最小日期范围

<!--
* @Date: 2022-08-31 11:45:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-07 15:15:00
* @LastEditTime: 2023-02-07 16:42:28
* @FilePath: /data-table/src/components/DatePickerField/index.vue
* @Description: 日期选择组件
-->
......@@ -44,10 +44,6 @@ const props = defineProps({
item: Object,
});
// 默认最大可选日期/最小可选日期
// const minDate = ref(new Date(2020, 0, 1))
// const maxDate = ref(new Date(2025, 5, 1))
// 隐藏显示
const HideShow = computed(() => {
return !props.item.component_props.disabled
......@@ -74,6 +70,10 @@ const formatZero = (num, len) => {
}
return (Array(len).join(0) + num).slice(-len)
}
const minDate = ref()
const maxDate = ref()
onMounted(() => {
currentDate.value = props.item.value.split("-");
const Year = String(dayjs().year());
......@@ -91,6 +91,15 @@ onMounted(() => {
currentDate.value = [Year, Month, Day];
break;
}
// 设置默认最大最小日期
if (data_minvalue.length) {
const min = data_minvalue.split("-")
minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
}
if (data_maxvalue.length) {
const max = data_maxvalue.split("-")
maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
}
});
const required = props.item.component_props.required;
......
<!--
* @Date: 2022-09-08 15:02:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-07 14:07:51
* @LastEditTime: 2023-02-07 16:46:30
* @FilePath: /data-table/src/components/DateTimePickerField/index.vue
* @Description: 日期时间选择器
-->
......@@ -30,7 +30,7 @@
@confirm="onConfirm"
@cancel="onCancel"
>
<van-date-picker v-model="currentDate" :columns-type="columns_date_type" />
<van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :columns-type="columns_date_type" />
<van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
</van-picker-group>
</van-popup>
......@@ -76,6 +76,10 @@ const formatZero = (num, len) => {
}
return (Array(len).join(0) + num).slice(-len)
}
const minDate = ref()
const maxDate = ref()
onMounted(() => {
// 获取值定位显示
const datetime = props.item.value.split(" ");
......@@ -126,6 +130,15 @@ onMounted(() => {
currentTime.value = [Hour, Minute, Second];
break;
}
// 设置默认最大最小日期
if (data_minvalue.split(" ")[0].length) {
const min = data_minvalue.split(" ")[0].split("-")
minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
}
if (data_maxvalue.split(" ")[0].length) {
const max = data_maxvalue.split(" ")[0].split("-")
maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
}
});
const required = props.item.component_props.required;
......