PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 小程序自定义选择时间范围

小程序自定义选择时间范围

樂成的开发笔记
樂成的开发笔记 原创
2019年09月18日 11:15:03 7365浏览

小程序时间选择器自定义选择时间范围,比如预约,只能预约一周之内的,这就涉及获取一周后的时间了(点击查看)

8282c4e732d23bbcd2a034c14119ad7.jpg0287e3d9ca8709c197be4d0f1860cb9.jpg

wxml代码

 <!-- start="{{startDate}}" end="{{endDate}}" 这个代码就是时间选择器的范围 -->
  <view class="dates">
	<picker mode="date" value="{{dates}}" start="{{startDate}}" end="{{endDate}}" bindchange="bindDateChange">  
	  <view class="picker">  
		{{dates}}
	  </view>
	  <input name="dates" class="width2" value="{{dates}}"  hidden='true'/> 
	</picker>
	<text decode="{{true}}">&ensp;&ensp;</text>
	<picker mode="time" value="{{times}}" start="{{startTime}}" end="23:59" bindchange="bindTimeChange">  
	  <view class="picker" name="times">  
	  {{times}}
	  </view>
	  <input name="times" class="width2" value="{{times}}"  hidden='true'/> 
	</picker>
  </view>

js代码

//点击时间组件确定事件  
bindTimeChange: function (e) {
  console.log(e.detail.value)
  this.setData({
    times: e.detail.value
  })
},
//点击日期组件确定事件  
bindDateChange: function (e) {
  console.log(e.detail.value)
  var startTime = this.data.startTime
  var times = this.data.times
  if (this.data.todays != e.detail.value){
    startTime = "00:00"
  }else{
    startTime = this.data.todayt
    times = this.data.todayt
  }
  this.setData({
    dates: e.detail.value,
    startTime: startTime,
    times: times
  })
},
getNowTime: function () {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    //如果需要时分秒,就放开
    var h = now.getHours();
    var day = now.getDate();
    var m = now.getMinutes();
    //var s = now.getSeconds();
    var formatDate = year + '-' + month + '-' + day + ' ' + h + ':' + m /*+ ':' + s*/;
    console.log('当前时间', formatDate)
    var formatDates = formatDate.split(' ');
    console.log(formatDates);
    this.setData({
        todays: formatDates[0],
        todayt: formatDates[1],
        dates: formatDates[0],
        times: formatDates[1],
        startDate: formatDates[0],
        endDate: this.funDate(7),
        startTime: formatDates[1]
    });
},

funDate:function (num) {
    var date1 = new Date();
    //今天时间
    var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
    console.log(time1);
    var date2 = new Date(date1);
    date2.setDate(date1.getDate() + num);
    //num是正数表示之后的时间,num负数表示之前的时间,0表示今天
    var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
    console.log(time2);
    return time2;
},


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议