Blogger Information
Blog 56
fans 7
comment 11
visits 222934
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
小程序自定义选择时间范围
樂成的开发笔记
Original
7458 people have browsed it

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

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;
},


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post