Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2024-08-09 11:44:10 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
e1f03f4e71f4d51c698f644fe9c98c449f90d3f8
e1f03f4e
1 parent
d3a06ca3
fix 处理单独显示日期样式,处理时间最大最小显示优化
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
79 additions
and
22 deletions
src/components/DateTimePickerField/index.vue
src/components/DateTimePickerField/index.vue
View file @
e1f03f4
<!--
* @Date: 2022-09-08 15:02:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-0
7 18:13:52
* @LastEditTime: 2024-08-0
9 11:40:31
* @FilePath: /data-table/src/components/DateTimePickerField/index.vue
* @Description: 日期时间选择器
-->
...
...
@@ -31,7 +31,7 @@
@cancel="onCancel"
>
<van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :columns-type="columns_date_type" />
<van-time-picker v-
model="current
Time" :columns-type="columns_time_type" />
<van-time-picker v-
if="columns_time_type.length" v-model="currentTime" :min-time="minTime" :max-time="max
Time" :columns-type="columns_time_type" />
</van-picker-group>
</van-popup>
</div>
...
...
@@ -65,7 +65,11 @@ const currentDate = ref([]);
const currentTime = ref([]);
const onConfirm = () => {
props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
if (columns_time_type.value.length) {
props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
} else {
props.item.value = `${currentDate.value.join("-")}`;
}
showPicker.value = false;
};
const onCancel = () => {
...
...
@@ -83,9 +87,15 @@ const formatZero = (num, len) => {
return (Array(len).join(0) + num).slice(-len)
}
const data_minvalue = props.item.component_props.data_minvalue;
const data_maxvalue = props.item.component_props.data_maxvalue;
const minDate = ref()
const maxDate = ref()
const minTime = ref()
const maxTime = ref()
onMounted(() => {
// 根据默认值时间调整显示
props.item.value = props.item.component_props.default ? props.item.component_props.default : '';
...
...
@@ -122,16 +132,43 @@ onMounted(() => {
columns_date_type.value = ['year']
// 设置默认值
currentDate.value = [Year];
// 设置默认最大最小日期
if (data_minvalue.split(" ")[0].length) {
const min = data_minvalue.split(" ")[0].split("-");
minDate.value = new Date(+min[0] + 1, 0, 0);
}
if (data_maxvalue.split(" ")[0].length) {
const max = data_maxvalue.split(" ")[0].split("-")
maxDate.value = new Date(+max[0] + 1, 0, 0)
}
break;
case "YYYY-MM":
columns_date_type.value = ['year', 'month']
// 设置默认值
currentDate.value = [Year, Month];
// 设置默认最大最小日期
if (data_minvalue.split(" ")[0].length) {
const min = data_minvalue.split(" ")[0].split("-");
minDate.value = new Date(+min[0], +min[1], 0);
}
if (data_maxvalue.split(" ")[0].length) {
const max = data_maxvalue.split(" ")[0].split("-")
maxDate.value = new Date(+max[0], +max[1], 0)
}
break;
case "YYYY-MM-DD":
columns_date_type.value = ['year', 'month', 'day']
// 设置默认值
currentDate.value = [Year, Month, Day];
// 设置默认最大最小日期
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])
}
break;
case "YYYY-MM-DD HH":
columns_date_type.value = ['year', 'month', 'day']
...
...
@@ -139,6 +176,22 @@ onMounted(() => {
// 设置默认值
currentDate.value = [Year, Month, Day];
currentTime.value = [Hour];
// 设置默认最大最小日期
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])
}
// 设置默认最大最小时间
if (data_minvalue.split(" ")[1]) {
minTime.value = data_minvalue.split(" ")[1];
}
if (data_maxvalue.split(" ")[1]) {
maxTime.value = data_maxvalue.split(" ")[1];
}
break;
case "YYYY-MM-DD HH:mm":
columns_date_type.value = ['year', 'month', 'day']
...
...
@@ -146,6 +199,13 @@ onMounted(() => {
// 设置默认值
currentDate.value = [Year, Month, Day];
currentTime.value = [Hour, Minute];
// 设置默认最大最小时间
if (data_minvalue.split(" ")[1]) {
minTime.value = data_minvalue.split(" ")[1];
}
if (data_maxvalue.split(" ")[1]) {
maxTime.value = data_maxvalue.split(" ")[1];
}
break;
case "YYYY-MM-DD HH:mm:ss":
columns_date_type.value = ['year', 'month', 'day']
...
...
@@ -153,30 +213,27 @@ onMounted(() => {
// 设置默认值
currentDate.value = [Year, Month, Day];
currentTime.value = [Hour, Minute, Second];
// 设置默认最大最小日期
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])
}
// 设置默认最大最小时间
if (data_minvalue.split(" ")[1]) {
minTime.value = data_minvalue.split(" ")[1];
}
if (data_maxvalue.split(" ")[1]) {
maxTime.value = data_maxvalue.split(" ")[1];
}
break;
}
// 设置默认最大最小日期
if (data_minvalue.split(" ")[0].length) {
const min = data_minvalue.split(" ")[0].split("-")
if (date_format === 'YYYY-MM') {
minDate.value = new Date(+min[0], +min[1] - 1)
} else {
minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
}
}
if (data_maxvalue.split(" ")[0].length) {
const max = data_maxvalue.split(" ")[0].split("-")
if (date_format === 'YYYY-MM') {
maxDate.value = new Date(+max[0], +max[1] - 1)
} else {
maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
}
}
});
const required = props.item.component_props.required;
const data_minvalue = props.item.component_props.data_minvalue;
const data_maxvalue = props.item.component_props.data_maxvalue;
const validator = (val) => {
if (required && !val) {
return false;
...
...
Please
register
or
login
to post a comment