Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
55fe2da5 1 parent a3c0b25c

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

Inline Side-by-side
Showing 2 changed files with 29 additions and 7 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-07 15:15:00 4 + * @LastEditTime: 2023-02-07 16:42:28
5 * @FilePath: /data-table/src/components/DatePickerField/index.vue 5 * @FilePath: /data-table/src/components/DatePickerField/index.vue
6 * @Description: 日期选择组件 6 * @Description: 日期选择组件
7 --> 7 -->
...@@ -44,10 +44,6 @@ const props = defineProps({ ...@@ -44,10 +44,6 @@ const props = defineProps({
44 item: Object, 44 item: Object,
45 }); 45 });
46 46
47 -// 默认最大可选日期/最小可选日期
48 -// const minDate = ref(new Date(2020, 0, 1))
49 -// const maxDate = ref(new Date(2025, 5, 1))
50 -
51 // 隐藏显示 47 // 隐藏显示
52 const HideShow = computed(() => { 48 const HideShow = computed(() => {
53 return !props.item.component_props.disabled 49 return !props.item.component_props.disabled
...@@ -74,6 +70,10 @@ const formatZero = (num, len) => { ...@@ -74,6 +70,10 @@ const formatZero = (num, len) => {
74 } 70 }
75 return (Array(len).join(0) + num).slice(-len) 71 return (Array(len).join(0) + num).slice(-len)
76 } 72 }
73 +
74 +const minDate = ref()
75 +const maxDate = ref()
76 +
77 onMounted(() => { 77 onMounted(() => {
78 currentDate.value = props.item.value.split("-"); 78 currentDate.value = props.item.value.split("-");
79 const Year = String(dayjs().year()); 79 const Year = String(dayjs().year());
...@@ -91,6 +91,15 @@ onMounted(() => { ...@@ -91,6 +91,15 @@ onMounted(() => {
91 currentDate.value = [Year, Month, Day]; 91 currentDate.value = [Year, Month, Day];
92 break; 92 break;
93 } 93 }
94 + // 设置默认最大最小日期
95 + if (data_minvalue.length) {
96 + const min = data_minvalue.split("-")
97 + minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
98 + }
99 + if (data_maxvalue.length) {
100 + const max = data_maxvalue.split("-")
101 + maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
102 + }
94 }); 103 });
95 104
96 const required = props.item.component_props.required; 105 const required = props.item.component_props.required;
......
1 <!-- 1 <!--
2 * @Date: 2022-09-08 15:02:45 2 * @Date: 2022-09-08 15:02:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-07 14:07:51 4 + * @LastEditTime: 2023-02-07 16:46:30
5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue 5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
6 * @Description: 日期时间选择器 6 * @Description: 日期时间选择器
7 --> 7 -->
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 @confirm="onConfirm" 30 @confirm="onConfirm"
31 @cancel="onCancel" 31 @cancel="onCancel"
32 > 32 >
33 - <van-date-picker v-model="currentDate" :columns-type="columns_date_type" /> 33 + <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :columns-type="columns_date_type" />
34 <van-time-picker v-model="currentTime" :columns-type="columns_time_type" /> 34 <van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
35 </van-picker-group> 35 </van-picker-group>
36 </van-popup> 36 </van-popup>
...@@ -76,6 +76,10 @@ const formatZero = (num, len) => { ...@@ -76,6 +76,10 @@ const formatZero = (num, len) => {
76 } 76 }
77 return (Array(len).join(0) + num).slice(-len) 77 return (Array(len).join(0) + num).slice(-len)
78 } 78 }
79 +
80 +const minDate = ref()
81 +const maxDate = ref()
82 +
79 onMounted(() => { 83 onMounted(() => {
80 // 获取值定位显示 84 // 获取值定位显示
81 const datetime = props.item.value.split(" "); 85 const datetime = props.item.value.split(" ");
...@@ -126,6 +130,15 @@ onMounted(() => { ...@@ -126,6 +130,15 @@ onMounted(() => {
126 currentTime.value = [Hour, Minute, Second]; 130 currentTime.value = [Hour, Minute, Second];
127 break; 131 break;
128 } 132 }
133 + // 设置默认最大最小日期
134 + if (data_minvalue.split(" ")[0].length) {
135 + const min = data_minvalue.split(" ")[0].split("-")
136 + minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
137 + }
138 + if (data_maxvalue.split(" ")[0].length) {
139 + const max = data_maxvalue.split(" ")[0].split("-")
140 + maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
141 + }
129 }); 142 });
130 143
131 const required = props.item.component_props.required; 144 const required = props.item.component_props.required;
......