cesuan/components/dateselect.vue

<template>
	
	<view class="uni-list-cell">
		<view class="uni-list-cell-db text-wrapper_1">
			<picker class="picker datepick" mode="date"  :start="startDate" :end="endDate" @change="bindDateChange">
				<view lines="1" class="text_46">{{year}}</view>
				<view lines="1" class="text_3">年</view>
				<view lines="1" class="text_47">{{month}}</view>
				<view lines="1" class="text_4">月</view>
				<view lines="1" class="text_48">{{day}}</view>
				<view lines="1" class="text_5">日</view>
			</picker>
			<picker class="picker"  :range="time24" start="0" end="23" @change="bindTimeEnd">
			<view style="display: inline-block;" lines="1" class="text_49">{{time}}</view>
			<view style="display: inline-block;" lines="1" class="text_16">时</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dateselect",
		props: {
			inputdate:{
				type: String,
				default: ''
			},
			inputtime:{
				type: String,
				default: ''
			}
		},
		
		
		data() {
			var myDate = new Date();
			return {
				year:myDate.getFullYear(),
				month:myDate.getMonth()+1,
				day:myDate.getDate(),
				time:myDate.getHours(),
				startDate:'1900-01-01',
				endDate:'2060-01-01',
				time24:["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"],
				date:''
			};
		},
		created() {
			if(this.inputdate!='')
			{
				var datearr = this.inputdate.split('-');
				this.year = datearr[0];
				this.month = datearr[1];
				this.day= datearr[2];
			}
			
			if(this.inputtime!='')
			{
				var timearr = this.inputtime.split(':');
				this.time = timearr[0];
				console.log(this.time);
			}
			
		},
		methods:{
			bindDateChange: function(e) {
				console.log(e.target.value);
				var datearr = e.target.value.split('-');
				this.year = datearr[0];
				this.month = datearr[1];
				
				var daytimearr = datearr[2].split(':');
				this.day= daytimearr[0];
				this.time = daytimearr[1];
				this.$emit('dateselect',e.target.value)   //把方法和值传递到页面   
			},
			bindTimeEnd(e)
			{
				this.time = e.target.value;
				this.$emit('timeselect',this.time)   //把方法和值传递到页面   
			},
		}
	}
</script>

<style>
  .uni-list-cell {
	  height:120rpx;
    overflow-wrap: break-word;
    color: rgba(34,24,21,1);
    font-size: 30rpx;
    font-family: FZLTHK--GBK1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin: 61rpx auto 0 auto;
  }
  
  .uni-input
  {

	  margin-top: 47rpx;
  }
  
  .tit,.uni-input
  {
	  display: flex;
	  justify-content: space-between;
	  text-align: center;
  }
  
  .year_f
  {
	  width: 100rpx;
  }
  
  .month_f
  {
  	  width: 100rpx;
  }
  
  .day_f
  {
  	  width: 100rpx;
  }

.text-wrapper_1 {
	background: url(../static/yinyang/selectbg.png) 100% no-repeat;
	background-size: 100% 100%;
  width: 536rpx;
  height: 50rpx;
  flex-direction: row;
  display: flex;
  margin: 0 auto 26rpx auto;
  position: relative;
}

.text_3 {
  width: 36rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(128,127,128,1);
  font-size: 24rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;

}
.text_4 {
  width: 40rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(128,127,128,1);
  font-size: 24rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;
  margin: 0;
}
.text_5 {
  width: 38rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(128,127,128,1);
  font-size: 24rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;
  margin:0;
}
.text_16 {
  position: absolute;
  top:0;
  width: 21rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(128,127,128,1);
  font-size: 24rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 50rpx;
  right: -44rpx;
}

.text_46 {
  width: 90rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(34,24,21,1);
  font-size: 30rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;
  margin-right: 30rpx;
}
.text_47 {
  width: 64rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(34,24,21,1);
  font-size: 30rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;
  margin-right: 28rpx;
}
.text_48 {
  width: 80rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(34,24,21,1);
  font-size: 30rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;
  margin-right: 24rpx;
}
.text_49 {
  width: 78rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(34,24,21,1);
  font-size: 30rpx;
  font-family: FZLTHK--GBK1-0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 50rpx;
  margin-right: 24rpx;
}

.datepick view
{
	display: inline-block;
}
</style>