uniapp/pages/eleControl/powerCut/calendar/calendar.vue

<template>
	
	<view>
		
		<view class="form-item">
			<view class="title">
				<text class="necessary">*</text>
				开始时间:
			</view>
			<picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateChange" style="">
				<view class="date">{{start_date}}</view>
			</picker>
		</view>
		<view class="form-item">
			<view class="title"><text class="necessary">*</text>结束时间:</view>
			<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
				<view class="date">{{end_date}}</view>
			</picker>
		</view>
		
		
	</view>
	<!-- <view class="leave_cont">
		<view class="ul">
			<view class="li">
				<view class="flex1">
					<picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateChange">
						<view class="date">{{start_date}}</view>
					</picker>
				</view>
			</view>
			~
			<view class="li">
				<view class="flex1">
					<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
						<view class="date">{{end_date}}</view>
					</picker>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	export default {
		name: 'calendar',
		props: {
			// bindData: {
			// 	type: Object,
			// 	default: ''
			// },
			bindStartTime: {
				type: String,
				default: ''
			},
			bindEndTime: {
				type: String,
				default: ''
			}
		},
		data() {
			console.log(this.bindStartTime)
			const currentDate = this.getTime({
				format: true
			})
			return {
				start_date:this.bindStartTime,
				end_date: this.bindEndTime,
				other: '请输入'
			}
		},
		computed: {

		},
		methods: {
			// 选择日期
			bindDateChange: function(e) {
				this.start_date = e.target.value;
				alert(this.start_date);
				 this.$emit('func', this.start_date) // 子组件向发射事件, 
			},
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
				this.other = this.end_date;
				this.$emit('func2', this.end_date) // 子组件向发射事件, 
			},
			// 获取当前时间
			// getDate(type) {
			// 	const date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = date.getMonth() + 1;
			// 	let day = date.getDate();

			// 	if (type === 'start') {
			// 		year = year - 60;
			// 	} else if (type === 'end') {
			// 		year = year + 2;
			// 	}
			// 	month = month > 9 ? month : '0' + month;;
			// 	day = day > 9 ? day : '0' + day;
			// 	return `${year}-${month}-${day}`;
			// },
			getTime() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			}

		}
	}
</script>

<style>
	picker{
		border:1px solid #EDEDED;display: block;
		height: 100%;width:500rpx;line-height:70rpx;height:70rpx;padding:0 20rpx
		
	}
	.date{
		color:#999
	}
	/* .leave_cont .ul {
		border: 1px solid red;
		margin: 24rpx 24rpx;
		border: 1px solid #E8F1FF;
		border-radius: 36rpx;
		line-height: 70rpx;
		position: relative;
	}

	.leave_cont .ul .li {
		display: inline-block;
		text-align: center;
		width: 35%
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
		font-size: 30rpx;
		color: #666666;
		text-align: center;
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		color: #999999;
		font-size: 32rpx;
	}

	.date {
		height: 42rpx;
	}

	.canlendar-icon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 30rpx;
		top: 16rpx;
	} */
</style>