小程式年月日時間段區間選擇

<view class="Zon">
	<view class="picker_view">
		<view class="picker__title">
			<text>接龍時間</text>
		</view>
		<view class="picker__content">
			<block wx:if="{{is_issueTime}}">
				<picker mode="date" start="{{issue_start_time}}" bindchange="onEnrollDateChange" data-change="init_time">
					<text class="enroll-picker__text"> 釋出即開始，7天后結束</text><text class="enroll-picker__right"></text>
				</picker>
			</block>
		</view>
	</view>
	<block wx:if="{{!is_issueTime}}">
		<view class="picker__extra">
			<view class="picker__extra_item">
				<!-- end="{{issue_end_time}}" start="{{issue_start_time}}"  -->
				<picker mode="date" value="{{jielongTime.startTimeDateValue}}" bindchange="onEnrollDateChange"
					data-change="date_start">{{jielongTime.startTimeDateValue}}</picker>
				<view class="text_border"></view>
				<picker mode="time" value="{{jielongTime.startTimeTimeValue}}" bindchange="onEnrollDateChange"
					data-change="time_start">{{jielongTime.startTimeTimeValue}}</picker>
			</view>
			<view class="text_slider">至</view>
			<view class="picker__extra_item">
				<picker mode="date" value="{{jielongTime.endTimeDateValue}}" bindchange="onEnrollDateChange"
					data-change="date_end">{{jielongTime.endTimeDateValue}}</picker>
				<view class="text_border"></view>
				<picker mode="time" value="{{jielongTime.endTimeTimeValue}}" bindchange="onEnrollDateChange"
					data-change="time_end">{{jielongTime.endTimeTimeValue}}</picker>
			</view>
		</view>
	</block>
</view>

const wxRequest = require('../../utils/http.js')
const app = getApp()
Page({
  data: {
    is_issueTime: true,
    jielongTime: {
      startTimeDateValue: '',
      startTimeTimeValue: '',
      endTimeDateValue: '',
      endTimeTimeValue: '',
    },
    useTime: {
      use_startTimeDateValue: '',
      use_startTimeTimeValue: '',
      use_endTimeDateValue: '',
      use_endTimeTimeValue: '',
    },
    issue_start_time: '',
  },

  onLoad: function (options) {
    let that = this
    // 預設選中時間
    // that.getTime(that.getDateStr(null, 0), 'init_time')
  },
  onShow: function (options) {},
  // 選擇接龍時間
  onEnrollDateChange(e) {
    let that = this
    let time = e.currentTarget.dataset.change
    let timestamp = e.detail.value
    that.getTime(timestamp, time)
  },

  // 獲取當前時間
  getTime(timestamp, _time) {
    let that = this
    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();
    var time = Y + '-' + M + '-' + D
    // 獲取當前時間---時分
    var at_time = Date.parse(new Date());
    var at_date = new Date(at_time);
    var hour = at_date.getHours() < 10 ? '0' + at_date.getHours() : at_date.getHours()
    var minute = at_date.getMinutes() < 10 ? '0' + at_date.getMinutes() : at_date.getMinutes()
    console.log(_time)
    switch (_time) {
      case "init_time":
        that.data.jielongTime.startTimeDateValue = that.getDateStr(time, 0)
        that.data.jielongTime.startTimeTimeValue = hour + ':' + minute
        that.data.jielongTime.endTimeDateValue = that.getDateStr(time, 7)
        that.data.jielongTime.endTimeTimeValue = hour + ':' + minute
        that.data.is_issueTime = false
        break;
      case "date_start":
        let s_time = new Date(time.replace(/\-/g, "/") + ' ' + that.data.jielongTime.startTimeTimeValue)
        let e_time = new Date(that.data.jielongTime.endTimeDateValue.replace(/\-/g, "/") + ' ' + that.data.jielongTime.endTimeTimeValue)
        if (s_time > e_time) {
          app.showToast('開始時間不能大於結束時間')
          return false
        }
        that.data.jielongTime.startTimeDateValue = time
        break;
      case "time_start":
        let tss_time = new Date(that.data.jielongTime.startTimeDateValue.replace(/\-/g, "/") + ' ' + timestamp)
        let tse_time = new Date(that.data.jielongTime.endTimeDateValue.replace(/\-/g, "/") + ' ' + that.data.jielongTime.endTimeTimeValue)
        if (tss_time > tse_time) {
          app.showToast('開始時間不能大於結束時間')
          return false
        }
        that.data.jielongTime.startTimeTimeValue = timestamp
        break;
      case "date_end":
        let ds_time = new Date(that.data.jielongTime.startTimeDateValue.replace(/\-/g, "/") + ' ' + that.data.jielongTime.startTimeTimeValue)
        let de_time = new Date(time.replace(/\-/g, "/") + ' ' + that.data.jielongTime.endTimeTimeValue)
        if (ds_time > de_time) {
          app.showToast('結束時間不能小於開始時間')
          return false
        }
        that.data.jielongTime.endTimeDateValue = time
        break;
      case "time_end":
        let dts_time = new Date(that.data.jielongTime.startTimeDateValue.replace(/\-/g, "/") + ' ' + that.data.jielongTime.startTimeTimeValue)
        let dte_time = new Date(that.data.jielongTime.endTimeDateValue.replace(/\-/g, "/") + ' ' + timestamp)
        if (dts_time > dte_time) {
          app.showToast('結束時間不能小於開始時間')
          return false
        }
        that.data.jielongTime.endTimeTimeValue = timestamp
        break;
      default:
        break;
    }
    that.setData({
      jielongTime: that.data.jielongTime,
      // useTime: that.data.useTime,
      is_issueTime: that.data.is_issueTime,
    })
  },
  // 獲取多少天后的時間
  getDateStr(today, addDayCount) {
    var dd;
    if (today) {
      dd = new Date(today);
    } else {
      dd = new Date();
    }
    dd.setDate(dd.getDate() + addDayCount); //獲取AddDayCount天后的日期 
    var y = dd.getFullYear();
    var m = (dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1);
    var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate();
    return y + "-" + m + "-" + d;
  },
})

page {
  background-color: #f5f5f5;
}

.Zon {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin: 10rpx 0;
}

.picker_view {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
}

.picker__title {
  margin-right: 15rpx;
}

.picker__extra,
.picker__extra_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 26rpx;
}

.picker__extra_item {
  color: red;
}

.text_slider {
  color: #000;
  margin: 0 10rpx;
}

.text_border {
  background: #d6e4ef;
  width: 4rpx;
  height: 26rpx;
  margin: 0 16rpx;
}