微信小程序日期控件

最新推荐文章于 2024-09-16 22:58:00 发布

置顶 weixin_44889983

最新推荐文章于 2024-09-16 22:58:00 发布

阅读量501

点赞数

分类专栏：微信小程序文章标签：小程序前端

本文链接：https://blog.csdn.net/weixin_44889983/article/details/112984047

版权

前端开发 Vue 日期选择器时间限制数据绑定

关键词由CSDN通过智能技术生成

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<template>
    <view class="container"> 
      <view class="p10 df fjs align-center">
				<picker class="weui-btn" mode="date" :value="startData"             :end="presentData" @change="dateSChange">
					<input class="uni-input textInput" :value="startData" :disabled="true" placeholder-class="gcc" placeholder="开始时间" />
				</picker>
				<view class="ml5 mr5">~</view>
				<picker class="weui-btn" mode="date" :value="endData" :start="startData" @change="dateEChange">
					<input class="uni-input textInput" :value="endData" :disabled="true" placeholder-class="gcc" placeholder="结束时间" />
				</picker>
			</view>
    </view>
</template>
 
<script>
  
    export default {
        data() {
            return {
                date: "",
				startData: "",
				endData: "",
				presentData: ""
            }
        },
        mounted() {
			var timestamp = Date.parse(new Date());
			var date = new Date(timestamp);
			//获取年份  
			var Y = date.getFullYear();
			//获取月份  
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : 
            date.getMonth() + 1);
			//获取当日日期 
			var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			this.presentData = Y + "-" + M + "-" + D
		},
       methods: {
			dateSChange(e) {
				this.startData = e.detail.value;
			},
			dateEChange(e) {
				this.endData = e.detail.value;
			}
		}
    }
</script>

<style>
    
</style>

起始时间、结束时间起始时间不能大于当前日期结束时间不能小于起始时间