wepy小程序日期选择器控件

wepy小程序时间选择控件,首次进入默认选择七天前至今天比如说(2020-3-14至2020-3-20).无论怎样选择变化时间间隔只能相差七天,并且后者选择器的结束日期为最新日期(同时提供了时间和时间戳方便给后端传输数据)。

wxml

<template lang="wxml">
	<!-- 时间控件  开始 -->
    <view>  
    <view class="picker_group">  
      <picker mode="date" value="{{beforeDateString}}" start="1970-01-01" end="{{beforeDateString}}" bindchange="bindDateChangeBefore">  
        <view class="picker">  
          {{beforeDateString}}  
        </view>  
      </picker>  
      至  
      <picker mode="date" value="{{nowDateString}}" start="1970-01-01" end="{{initialTime}}" bindchange="bindDateChangeNow" @tap="initialTime">  
        <view class="picker">  
          {{nowDateString}}  
        </view>  
      </picker>        
    </view>  
    </view>  
</template>
<!-- 时间控件  结束 -->

css

    .picker_group {
      height: 85rpx;
      line-height: 85rpx;
      justify-content: center;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #888;
      border-bottom: 1rpx solid #efefef;

    }

    .picker_group picker {
      color: #64bff1;
      height: 55rpx;
      line-height: 55rpx;
      margin: 0 2%;
      padding: 0 2%;
      border: 1rpx solid #64bff1;
      border-radius: 30rpx;
    }

js

export default class mainDetail extends wepy.page {
		config = {
			navigationBarTitleText: '时间控件'
		}
		data = {
		     beforeDateString: '',//默认起始时间  
		     nowDateString: '',//默认结束时间 
		     nowTimestamp:'',//结束时间时间戳
		     beforeTimestamp:'',  //开始时间时间戳
		     initialTime:'',//仅供时间控件结束时间为最新时间
		     }
	  		onLoad(query) {
		      //默认时间
		      var nowDate = Date.parse(new Date()) ;
		      var nowDate = nowDate / 1000
		      this.nowTimestamp=nowDate//后时间戳
		      this.beforeTimestamp=nowDate-24 * 60 * 60 * 6//前时间戳
		      // 调用封装好的时间转换方法
		      //后时间戳转换
		       var nowDateString=this.timestampToTime(this.nowTimestamp);
		       this.nowDateString=nowDateString
		      console.log(this.nowDateString)
		      //前时间戳转换
		      var beforeDateString=this.timestampToTime(this.beforeTimestamp);
		      this.beforeDateString=beforeDateString
		      console.log(this.beforeDateString)
			}
		  //封装的时间戳转日期2020-02-20
		   timestampToTime(timestamp) {
		      var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
		      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()) + ' ';
		      var strDate = Y+M+D;
		      return strDate;
		    }
	methods = {
    // 时间段选择  
      bindDateChangeBefore(e) {
        let that = this
        that.beforeDateString=e.detail.value
        var data=new Date(that.beforeDateString)
        var beforeData=data.getTime()/1000;
        that.beforeTimestamp=beforeData
        console.log("1-----" + beforeData)//选择日期的时间戳
        console.log("1-----" + that.beforeDateString)//选择的日期
        var noweData=data.getTime()/1000+24 * 60 * 60 * 6;//选择后另一个自动变化的时间戳 + 7天
        var nowTime=this.timestampToTime(noweData);
        that.nowDateString=nowTime
        that.nowTimestamp=noweData
        console.log("2------" + noweData)
        console.log("2------" + that.nowDateString)
        this.getEarningsInfo()

      },
      bindDateChangeNow(e) {
        let that = this
        that.nowDateString=e.detail.value
        var data=new Date(that.nowDateString)
        var noweData=data.getTime()/1000;
        that.nowTimestamp=noweData
        console.log("1-----" + noweData)//选择日期的时间戳
        console.log("1-----" + that.nowDateString)//选择的日期
        var beforeData=data.getTime()/1000-24 * 60 * 60 * 6;//选择后另一个自动变化的时间戳 -7天
        var beforeTime=this.timestampToTime(beforeData);
        that.beforeDateString=beforeTime
        that.beforeTimestamp=beforeData
        console.log("2------" + beforeData)
        console.log("2------" + that.beforeDateString)
        this.getEarningsInfo()

      },
      // 点击选择后者时间时限制只能选到今日
      initialTime(){
        let that = this
        var nowDate = Date.parse(new Date()) ;
        var nowDate = nowDate / 1000
        this.nowTimestamp=nowDate//后时间戳
        // 调用封装好的时间转换方法
        //后时间戳转换
        var nowDateString=that.timestampToTime(that.nowTimestamp);
        that.initialTime=nowDateString
        console.log(that.initialTime)
      }

		
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值