小程序年月日时间段区间选择

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