组件（移动端）--时间区间

朝歌233

已于 2022-08-16 16:53:51 修改

阅读量638

点赞数

文章标签：前端 html javascript

于 2022-08-16 16:51:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53208184/article/details/126369424

版权

该博客介绍了一个基于Vant组件库实现的时间区间选择器。组件允许用户选择开始和结束时间，不设范围限制，同时支持开始时间小于结束时间。通过在Vue中绑定事件，仅在用户确认后更新页面，确保了短暂的UI更新。博客提供了H5和JS代码示例，展示了如何创建和使用这个组件，并在页面中监听选中事件以调用相关功能。最终，此组件适用于需要时间敏感操作的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本说明：

基于vant 组件实现的一个可以选择区间的组件可以选择开始与结束时间，不限制范围，同时开始时间允许少于结束时间（bug)，但是无伤大雅，同时基于moment函数。

逻辑说明：

将vue绑定事件到子组件上，只有选择确定才会触发页面的事件，达到短暂更新的效果。

具体实现：

h5部分

	<view>
		<van-field readonly clickable is-link name="birth" :value="value" label="开始日期" placeholder="点击选择要查询的开始日期"
			@click="showBirth = true" />
		<van-field readonly clickable is-link name="birth" :value="endValue" label="结束日期" placeholder="点击选择要查询的结束日期"
			@click="showEndDate = true" />
		<van-popup v-model="showBirth" position="bottom" :lazy-render="false" :style="{ height: '40%' }">
			<van-datetime-picker v-model="currentDate" type="date" title="选择住院开始日期" @cancel="onCancel"
				@confirm="selDate" />
		</van-popup>
		<van-popup v-model="showEndDate" position="bottom" :lazy-render="false" :style="{ height: '40%' }">
			<van-datetime-picker v-model="endDate" type="date" title="选择住院结束日期" @cancel="endDateOnCancel"
				@confirm="selEndDate" />
		</van-popup>
	</view>

js部分：

	export default {
		name:"timePick",
		data() {
			return {
				showBirth: false,
				showEndDate: false,
				value: this.$moment(new Date()).subtract(30, 'days').format("YYYY-MM-DD"),
				endValue: this.$moment(new Date()).format("YYYY-MM-DD"),
				currentDate:'',
				endDate:''
			};
		},
		methods:{
			onCancel() {
				this.showBirth = false;
			},
			endDateOnCancel() {
				this.showEndDate = false;
			},
			selDate(val) {
				this.value = this.$moment(val).format("YYYY-MM-DD");
				this.showBirth = false;
				this.$emit("selDate");
			},
			selEndDate(val) {
				this.endValue = this.$moment(val).format("YYYY-MM-DD");
				this.showEndDate = false;
				this.$emit("selEndDate");
			},
		}
	}

具体页面部分：

<timePick @selDate="getList" @selEndDate="getList"/>

getList() {
            /*写自己在页面调用的方法*/
			console.log(666)
			....

			},

实现效果：

总结:

主要用于对于时间敏感的函数调用