目录
1. 场景
将 ion-datetime 封装成组件:
- 使用两个 ion-datetime 分别接受开始时间(A)、结束时间(B)
- 给 A 传入 new Date().toISOString(),给 B 传入 new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toISOString()
- 给 B 设置 min 属性
在不先选择开始时间,而是先选择结束时间的情况下,会报错:
<template>
<ion-list>
<ion-item>
<ion-label>开始时间:</ion-label>
<ion-datetime
cancel-text="取消"
done-text="确定"
display-format="YYYY年MM月DD日"
picker-format="YYYY MM DD"
v-model="startTime"
@ion-change="changeValue"
></ion-datetime>
</ion-item>
<ion-item>
<ion-label>结束时间:</ion-label>
<ion-datetime
cancel-text="取消"
done-text="确定"
display-format="YYYY年MM月DD日"
v-model="endTime"
:min="startTime"
@ion-change="changeValue"
></ion-datetime>
</ion-item>
</ion-list>
</template>
<script lang="ts">
import {
defineComponent,
} from 'vue';
import { reactive, toRefs } from '@vue/reactivity';
import { IonList, IonItem, IonDatetime, IonLabel } from '@ionic/vue';
import { PropType } from '@vue/runtime-core';
import { SolidSourceDetailQuerydateScopeProps } from '@/types/map/solid-source-detail';
export default defineComponent({
name: 'DateScope',
components: {
IonList,
IonItem,
IonDatetime,
IonLabel,
},
props: {
params: {
type: Object as PropType<SolidSourceDetailQuerydateScopeProps>,
default: () => ({
paramName: 'dateScope',
defaultValue: [
new Date().toISOString(),
new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toISOString(),
],
}),
}
},
emits: ['change-value'],
setup(props, { emit }) {
const state = reactive({
// 开始时间
startTime: props.params.defaultValue[0],
// 结束时间
endTime: props.params.defaultValue[1],
});
/**
* 改变值
*/
function changeValue() {
// 传参
const params = {
[props.params.paramName]: `${state.startTime},${state.endTime}`,
};
emit('change-value', params);
}
return {
...toRefs(state),
changeValue,
};
},
});
</script>
2. 思考
这是由于 默认传入的日期格式 不对
当没有先选择开始日期时,传入的是默认日期(未经处理的 new Date(),而不是经过处理的 xxxx-xx-xx)
接口返回的日期格式为 '2021-11-15 23:00:00',格式化为 '2021-11-15' 即可
3. 扩展
IOS 中,不支持以 “-” 分割的 时间格式(例如:2021-12-02)
注意将 时间格式 使用 “/” 进行分割(例如:2021/12/02)