<template>    <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={dateMltiSelectorValue} onchange={this.dateMultiSelectorChange} oncolumnchange={this.dateMultiSelectorColumnChange}>					<text class="picker-label">{dateDesc}</text>	</picker></template><script>	export default {		name: 'datePicker',		props:{			label:String,			pickerId:String		},		installed(){			this.getYears();				this.initDateData();		},		data() {			return{				year:[],				month:[1,2,3,4,5,6,7,8,9,10,11,12],				day:[],				yearNow:new Date().getFullYear(),				dateMltiSelectorValue:[0,0,0],				selectYear:new Date().getFullYear(),				selectMoth:1,				selectDay:1,				dateList:[],				dateDesc:'' 			}		},		methods: {			getYears(){				this.data.year=[];//一个页面多次使用的情况 必须先清空 否则会出现各种问题				for(i=0;i<100;i++){					this.data.year.push(this.yearNow-i);				}			},			initDateData(){				//根据当前年月获取当月天数				this.data.day=[];				var days = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate();				console.log(days);				for(i=1;i<=days;i++){					this.data.day.push(i);				}				this.data.dateMltiSelectorValue=[0,new Date().getMonth(),new Date().getDate()-1];				this.data.dateList = [this.data.year,this.data.month,this.data.day];				var picker = document.getElementById(this.props.pickerId);							picker.setData({					data: this.data.dateList				});			},			//根据年月获取天数			setDays(){				this.data.day=[];				var days = new Date(this.data.selectYear, this.data.selectMoth, 0).getDate();				for(i=1;i<=days;i++){					this.data.day.push(i);				}				this.data.dateList = [this.data.year,this.data.month,this.data.day];				var picker = document.getElementById(this.props.pickerId);				picker.setData({					data: this.data.dateList				});			},			dateMultiSelectorChange(e){				this.data.dateMltiSelectorValue=[e.detail.value[0],e.detail.value[1],e.detail.value[2]];							var year = this.data.year[e.detail.value[0]];				// var month = this.data.selectMoth>9?this.data.selectMoth:'0'+this.data.selectMoth;				var month = this.data.month[e.detail.value[1]]>9?this.data.month[e.detail.value[1]]:'0'+this.data.month[e.detail.value[1]];				var day = this.data.day[e.detail.value[2]]>9?this.data.day[e.detail.value[2]]:'0'+this.data.day[e.detail.value[2]];				this.data.dateDesc = year+'-'+month+'-'+day;				this.fire('setDate', this.data.dateDesc);			},			dateMultiSelectorColumnChange(e){				var column = e.detail.column;				if (column == this.data.dateList.length-1) {                    return;                }				if(column==0){					this.data.selectYear = this.data.year[e.detail.value];					this.data.dateMltiSelectorValue[0]=e.detail.value;					this.setDays();						}				else if(column==1){					this.data.selectMoth = this.data.month[e.detail.value];					this.data.dateMltiSelectorValue[1]=e.detail.value;					this.setDays();							}			}		}	}</script><style>    .picker {        background-color: #ffffff;    }	.picker-label{		font-size: 18px;	}</style>

<template>     <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={timeMltiSelectorValue} onchange={this.timeMultiSelectorChange}>					<text class="picker-label">{timeDesc}</text>	</picker></template><script>	export default {		name: 'timePicker',		props:{			label:String,			pickerId:String		},		installed(){			this.setHours();			this.setMinutes();				this.initDateData();		},		data() {			return{				hour:[],				minute:[],				second:[],				timeList:[],				timeMltiSelectorValue:[0,0,0],				timeDesc:''			}		},		methods: {			setHours(){				for (let index = 0; index < 24; index++) {					this.data.hour.push(index>9?index:'0'+index);								}			},			setMinutes(){				for (let index = 0; index < 60; index++) {					this.data.minute.push(index>9?index:'0'+index);					this.data.second.push(index>9?index:'0'+index);								}							},			initDateData(){				//初始化设定当前时间				this.data.timeMltiSelectorValue=[new Date().getHours(),new Date().getMinutes(),new Date().getSeconds()];				this.data.timeList=[this.data.hour,this.data.minute,this.data.second];				var picker = document.getElementById(this.props.pickerId);				picker.setData({					data: this.data.timeList				});			},			timeMultiSelectorChange(e){				this.data.timeMltiSelectorValue=[e.detail.value[0],e.detail.value[1],e.detail.value[2]];						var hour = this.data.hour[e.detail.value[0]];				var minute = this.data.minute[e.detail.value[1]];				var second = this.data.second[e.detail.value[2]];				this.data.timeDesc = hour+':'+minute+':'+second;				this.fire('setDate', this.data.timeDesc);			},		}	}</script><style>    .picker {        background-color: #ffffff;    }	.picker-label{		font-size: 18px;	}</style>

<template>    <scroll-view class="page">		<safe-area></safe-area>		<view class="item">			<text class="item-label">日程主题</text>			<input class="item-input" placeholder="输入日程主题" v-model="title"/>		</view>		<view class="item">			<text class="item-label">日程简要</text>			<textarea  class="item-area" placeholder="输入日程简要内容" v-model="content"/>			</view>		<view class="item">			<text class="item-label">日期</text>			<datePicker onsetDate="setDate" label=""  pickerId="datePicker"></datePicker>		</view>		<view class="item">			<text class="item-label">时间</text>			<timePicker onsetDate="setTime" label="" pickerId="timePicker"></timePicker>		</view>		<view class="item">			<text class="item-label">人员</text>			<input class="item-input" placeholder="请选择人员" v-model="title"/>		</view>		<view class="bt-box">			<button class="bt" onclick={this.btnAction}>保存</button>		</view>    </scroll-view></template><script>	import '../../components/datePicker.stml'	import '../../components/timePicker.stml'	export default {		name: 'adddaily',		apiready(){ 		},		data() {			return{				date:'',				time:'',				title:'',				content:'',				users:''			}		},		methods: {			setDate(e){				this.data.date = e.detail;			},			setTime(e){				this.data.time = e.detail;			}		}	}</script><style>    .page {        height: 100%;		background-color: #ffffff;    }	.item{		margin: 10px;		border-bottom: 1px solid #ccc;	}	.item-label{		font-size: 13px;		color: #666666;	}	.item-input{		width: auto;		border: 0;	}	.item-area{		border: 0;		height: 50px;		width: auto;	}	.bt-box{		margin: 10px;	}	.bt{		color: #ffffff;		font-size: 18px;		background-color: #035dff;		border-radius: 10px;	}</style>