Seleção de período de tempo do mini programa para selecionar um determinado período de tempo de um determinado dia com base no seletor de data do seletor de período de tempo do vantweapp

 endereço de demonstração:

https://github.com/939624959/Components-time-picker-.git

contente

Efeito de imagem: 

Seletor de tempo do componente

selecionador de tempo.json

selecionador de tempo.js

 selecionador de tempo.wxml

 time-picker.wxss

 página

page.json

page.js 

page.wxml

página.wxss


Efeito de imagem: 

Seletor de tempo do componente

selecionador de tempo.json

{
	"component": true,
	"usingComponents": {
		"van-popup": "@vant/weapp/popup/index",
		"van-icon": "@vant/weapp/icon/index",
		"van-tree-select": "@vant/weapp/tree-select/index",
		"van-button": "@vant/weapp/button/index"
	}
}

selecionador de tempo.js

const getDateStr = AddDayCount => {
	var dd = new Date();
	dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
	var y = dd.getFullYear();
	var m = dd.getMonth()+1;//获取当前月份的日期
	var d = dd.getDate();
	return y+"-"+m+"-"+d;
}

Component({
	properties: {
		title: String, // 标题
		isShow: Boolean,  // 控制显示隐藏
		dayNum: Number,  // 左侧导航栏数量
		timeArr: Array  // 右侧时间段数组
	},

	data: {
		mainActiveIndex: 0,
		activeId: null,
		itemTree:[]
	},

	lifetimes: {
		attached: function() {
		  // 在组件实例进入页面节点树时执行
		  this.getTimeLists()
		},
		detached: function() {
		  // 在组件实例被从页面节点树移除时执行
		},
	},

	methods: {
		// 关闭页面 触发父级设置为隐藏
		onClose(){
			this.triggerEvent('closeEvent',{})
		},
		// 选择大类
		onClickNav({ detail = {} }) {
			this.setData({
			  mainActiveIndex: detail.index || 0,
			});
		},
		// 选择小类
		onClickItem({ detail = {} }) {
			const activeId = this.data.activeId === detail.id ? null : detail.id;
		
			this.setData({ activeId });
		},
		// 确定按钮
		timePicked(){
			let { activeId } = this.data
			if(!!activeId){
				let dayIndex = Math.floor(activeId / 10)
				let timeIndex = activeId - dayIndex * 10
				console.log(dayIndex, timeIndex)
				let day = this.data.itemTree[dayIndex-1].text
				console.log(day)
				let time = this.data.itemTree[dayIndex].children[timeIndex].text
				console.log(time)
				let value = day + ' ' + time
				console.log(value)
				this.triggerEvent('onSelected', {value})
			}
			
			this.triggerEvent('closeEvent',{})
		},
		// 获取时间树数据
		getTimeLists(){
			let itemTree = []
			for(let i = 1; i <= this.properties.dayNum; i++){
				let day = getDateStr(i)
				let children = []
				for(let j = 0; j <= this.properties.timeArr.length; j++){
					children.push({
						text: this.properties.timeArr[j],
						id: i * 10 + j	
					})
				}
				
				itemTree.push({
					text: day,
					children
				})
			}
			this.setData({itemTree})
		},
	}
})

 selecionador de tempo.wxml

<van-popup
	show="{
   
   { isShow }}"
	round
	position="bottom"
	bind:close="onClose"
>
	<!-- 标题 -->
	<view class="title">
		<view>{
   
   {title}}</view>
		<view bindtap="onClose" style="width: 50rpx;height: 50rpx;text-align: center;"><van-icon name="cross" /></view>
		
	</view>
	<!-- 选择器 -->
	<van-tree-select
		items="{
   
   { itemTree }}"
		main-active-index="{
   
   { mainActiveIndex }}"
		active-id="{
   
   { activeId }}"
		main-active-class="green"
		content-active-class="green"
		bind:click-nav="onClickNav"
		bind:click-item="onClickItem"
	/>
	<!-- 确定按钮 -->
	<view class="footerBtn">
		<van-button type="primary" block round bind:click="timePicked">确定</van-button>
	</view>
</van-popup>

 time-picker.wxss

.title{
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 40rpx;
}
.green{
	color: #04c255;
	border-color: #04c255!important;
}
.footerBtn{
	padding: 20rpx;
	border-top: 1rpx solid #f7f8fa;
}

 página

page.json

{
  "navigationBarTitleText": "时间选择器",
  "usingComponents": {
    "time-picker": "/components/time-picker/time-picker",
    "van-cell": "@vant/weapp/cell/index"
  }
}

page.js 

Page({

	data: {
		showTimePicker: true, // 是否显示时间选择器
		expTime: '请选择期望时间',  // 页面显示选中时间值
		dayNum: 5,  // 日期数量
		timeArr: ['09:00-15:00', '15:00-21:00']  // 时间段数组
	},

	// 打开时间选择器
	toPickTime(){
		this.setData({showTimePicker: true})
	},
    // 关闭时间选择器
	closeTimePicker(){
		this.setData({showTimePicker: false})
	},
    // 跟新选中时间值
	updateExpTime(e){
		let expTime = e.detail.value
		this.setData({expTime})
	},
})

page.wxml

<view>
	<view class="label">期望上门时间:</view>
	<van-cell title="{
   
   {expTime}}" is-link bind:click="toPickTime"/>
	<!-- 时间选择器 -->
	<time-picker
        isShow="{
   
   {showTimePicker}}"
        title="选择上门时间" 
        dayNum="{
   
   {dayNum}}" 
        timeArr="{
   
   {timeArr}}"
        bindcloseEvent="closeTimePicker" 
        bindonSelected="updateExpTime"
    />
</view>

página.wxss

.label{
	padding: 20rpx;
	font-size: 28rpx;
}

Acho que você gosta

Origin blog.csdn.net/weixin_59128282/article/details/122111240
Recomendado
Clasificación