jyz/components/w-picker/half-picker.vue

<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.days" :key="index">{{item}}日</view>
			</picker-view-column>
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.sections" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>
<script>
	let _this=null;
	export default {
		data() {
			return {
				pickVal:[],
				range:{},
				checkObj:{}
			};
		},
		props:{
			itemHeight:{
				type:String,
				default:"44px"
			},
			startYear:{
				type:String,
				default:""
			},
			endYear:{
				type:String,
				default:""
			},
			value:{
				type:[String,Array,Number],
				default:""
			},
			current:{//是否默认选中当前日期
				type:Boolean,
				default:false
			},
			disabledAfter:{//是否禁用当前之后的日期
				type:Boolean,
				default:false
			}
		},
		watch:{
			value(val){
				this.initData();
			}
		},
		created() {
			_this=this;
			_this.initData();
		},
		methods:{
			formatNum(n){
				return (Number(n)<10?'0'+Number(n):Number(n)+'');
			},
			checkValue(value){
				let strReg=/^\d{4}-\d{2}-\d{2} [\u4e00-\u9fa5]{2}$/,example;
				if(!strReg.test(value)){
					console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
				}
				return strReg.test(value);
			},
			resetData(year,month,day){
				let curDate=_this.getCurrenDate();
				let curFlag=_this.current;
				let curYear=curDate.curYear;
				let curMonth=curDate.curMonth;
				let curDay=curDate.curDay;
				let curHour=curDate.curHour;
				let months=[],days=[],sections=[];
				let disabledAfter=_this.disabledAfter;
				let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
				let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
				let daysLen=disabledAfter?((year*1<curYear||month*1<curMonth)?totalDays:curDay):totalDays;
				let sectionFlag=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)==true?false:true):(curHour>12==true?true:false);
				sections=["上午","下午"];
				for(let month=1;month<=monthsLen;month++){
					months.push(_this.formatNum(month));
				};
				for(let day=1;day<=daysLen;day++){
					days.push(_this.formatNum(day));
				}
				if(sectionFlag){
					sections=["上午"];
				}
				return{
					months,
					days,
					sections
				}
			},
			getData(dVal){
				//用来处理初始化数据
				let curFlag=_this.current;
				let disabledAfter=_this.disabledAfter;
				let curDate=_this.getCurrenDate();
				let curYear=curDate.curYear;
				let curMonthdays=curDate.curMonthdays;
				let curMonth=curDate.curMonth;
				let curDay=curDate.curDay;
				let defaultDate=_this.getDefaultDate();
				let startYear=_this.getStartDate().getFullYear();
				let endYear=_this.getEndDate().getFullYear();
				let years=[],months=[],days=[],sections=[];
				let year=dVal[0]*1;
				let month=dVal[1]*1;
				let day=dVal[2]*1;
				let monthsLen=disabledAfter?(year<curYear?12:curDate.curMonth):12;
				let daysLen=disabledAfter?((year<curYear||month<curMonth)?defaultDate.defaultDays:curDay):(curFlag?curMonthdays:defaultDate.defaultDays);

				for(let year=startYear;year<=(disabledAfter?curYear:endYear);year++){
					years.push(year.toString())
				}
				for(let month=1;month<=monthsLen;month++){
					months.push(_this.formatNum(month));
				}
				for(let day=1;day<=daysLen;day++){
					days.push(_this.formatNum(day));
				}
				sections=["上午","下午"];
				return {
					years,
					months,
					days,
					sections
				}
			},
			getCurrenDate(){
				let curDate=new Date();
				let curYear=curDate.getFullYear();
				let curMonth=curDate.getMonth()+1;
				let curMonthdays=new Date(curYear,curMonth,0).getDate();
				let curDay=curDate.getDate();
				let curHour=curDate.getHours();
				let curSection="上午";
				if(curHour>12){
					curSection="下午";
				}
				return{
					curDate,
					curYear,
					curMonth,
					curMonthdays,
					curDay,
					curHour,
					curSection
				}
			},
			getDefaultDate(){
				let value=_this.value;
				let reg=/-/g;
				let defaultDate=value?new Date(value.split(" ")[0].replace(reg,"/")):new Date();
				let defaultYear=defaultDate.getFullYear();
				let defaultMonth=defaultDate.getMonth()+1;
				let defaultDay=defaultDate.getDate();
				let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
				return{
					defaultDate,
					defaultYear,
					defaultMonth,
					defaultDay,
					defaultDays
				}
			},
			getStartDate(){
				let start=_this.startYear;
				let startDate="";
				let reg=/-/g;
				if(start){
					startDate=new Date(start+"/01/01");
				}else{
					startDate=new Date("1970/01/01");
				}
				return startDate;
			},
			getEndDate(){
				let end=_this.endYear;
				let reg=/-/g;
				let endDate="";
				if(end){
					endDate=new Date(end+"/12/31");
				}else{
					endDate=new Date();
				}
				return endDate;
			},
			getDval(){
				let value=_this.value;
				let dVal=null;
				let aDate=new Date();
				let year=_this.formatNum(aDate.getFullYear());
				let month=_this.formatNum(aDate.getMonth()+1);
				let day=_this.formatNum(aDate.getDate());
				let hour=aDate.getHours();
				let section="上午";
				if(hour)section="下午";
				if(value){
					let flag=_this.checkValue(value);
					if(!flag){
						dVal=[year,month,day,section]
					}else{
						let v=value.split(" ");
						dVal=[...v[0].split("-"),v[1]];
					}
				}else{
					dVal=[year,month,day,section]
				}
				return dVal;
			},
			initData(){
				let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
				let years=[],months=[],days=[],sections=[];
				let dVal=[],pickVal=[];
				let value=_this.value;
				let reg=/-/g;
				let range={};
				let result="",full="",year,month,day,section,obj={};
				let defaultDate=_this.getDefaultDate();
				let defaultYear=defaultDate.defaultYear;
				let defaultMonth=defaultDate.defaultMonth;
				let defaultDay=defaultDate.defaultDay;
				let defaultDays=defaultDate.defaultDays;
				let curFlag=this.current;
				let disabledAfter=this.disabledAfter;
				let curDate=_this.getCurrenDate();
				let curYear=curDate.curYear;
				let curMonth=curDate.curMonth;
				let curMonthdays=curDate.curMonthdays;
				let curDay=curDate.curDay;
				let curSection=curDate.curSection;
				let dateData=[];
				dVal=_this.getDval();
				startDate=this.getStartDate();
				endDate=this.getEndDate();
				startYear=startDate.getFullYear();
				startMonth=startDate.getMonth();
				startDay=startDate.getDate();
				endYear=endDate.getFullYear();
				endMonth=endDate.getMonth();
				endDay=endDate.getDate();
				dateData=_this.getData(dVal);
				years=dateData.years;
				months=dateData.months;
				days=dateData.days;
				sections=dateData.sections;
				pickVal=disabledAfter?[
					dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
					dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
					dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
					dVal[3]&&sections.indexOf(dVal[3])!=-1?sections.indexOf(dVal[3]):0
				]:(curFlag?[
					years.indexOf(curYear+''),
					months.indexOf(_this.formatNum(curMonth)),
					days.indexOf(_this.formatNum(curDay)),
					sections.indexOf(_this.formatNum(curSection)),
				]:[
					dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
					dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0,
					dVal[2]&&days.indexOf(dVal[2])!=-1?days.indexOf(dVal[2]):0,
					dVal[3]&&sections.indexOf(dVal[3])!=-1?sections.indexOf(dVal[3]):0
				]);
				range={years,months,days,sections};
				year=dVal[0]?dVal[0]:years[0];
				month=dVal[1]?dVal[1]:months[0];
				day=dVal[2]?dVal[2]:days[0];
				section=dVal[3]?dVal[3]:sections[0];
				result=full=`${year+'-'+month+'-'+day+' '+section}`;
				obj={
					year,
					month,
					day,
					section
				}
				_this.range=range;
				_this.checkObj=obj;
				_this.$nextTick(()=>{
					_this.pickVal=pickVal;
				});
				_this.$emit("change",{
					result:result,
					value:full,
					obj:obj
				})
			},
			handlerChange(e){
				let arr=[...e.detail.value];
				let data=_this.range;
				let year="",month="",day="",section="";
				let result="",full="",obj={};
				let months=null,days=null,sections=null;
				let disabledAfter=_this.disabledAfter;
				year=(arr[0]||arr[0]==0)?data.years[arr[0]]||data.years[data.years.length-1]:"";
				month=(arr[1]||arr[1]==0)?data.months[arr[1]]||data.months[data.months.length-1]:"";
				day=(arr[2]||arr[2]==0)?data.days[arr[2]]||data.days[data.days.length-1]:"";
				section=(arr[3]||arr[3]==0)?data.sections[arr[3]]||data.sections[data.sections.length-1]:"";
				result=full=`${year+'-'+month+'-'+day+' '+section}`;
				let resetData=_this.resetData(year,month,day);
				if(this.disabledAfter){
					months=resetData.months;
					days=resetData.days;
					sections=resetData.sections;
				}else{
					if(year%4==0||(month!=this.checkObj.month)){
						days=resetData.days;
					}
				}
				if(months)_this.range.months=months;
				if(days)_this.range.days=days;
				if(sections)_this.range.sections=sections;
				obj={
					year,
					month,
					day,
					section
				}
				this.checkObj=obj;
				_this.$emit("change",{
					result:result,
					value:full,
					obj:obj
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";
</style>