market-app-ui/components/mcalendar/mcalendar.vue

<template>
	<view>
		<view class="mcalendar">
			<view class="con">
				<text class="icon">&#xe621;</text>
				<input placeholder="选择日期范围" :value="param.data" class="date" :disabled="true" @click="show = true" />
				<text class="icon del" @click="clear()" v-if="param.data">&#xe61a;</text>
				<text class="label" @click="today()">今天</text>
			</view>
		</view>
		<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="confirm" @close="show = false" :closeOnClickOverlay="true"></u-calendar>
	</view>
</template>

<script>
export default {
	name: 'mcalendar',
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			show: false,
			minDate: this.util.getDate('lm'),
			param: {}
		};
	},
	watch: {
		value(newValue) {
			this.show = newValue;
		}
	},
	methods: {
		confirm(e) {
			this.$emit('input', false);
			this.param.dateBegin = e[0];
			this.param.dateEnd = e[1];
			this.param.data = e[0] + ' - ' + e[1];
			this.show = false;
			this.$emit('confirm', e);
		},
		today() {
			this.param.dateBegin = this.util.getDate('day');
			this.param.dateEnd = this.util.getDate('day');
			this.param.data = this.util.getDate('day') + ' - ' + this.util.getDate('day');
			this.$forceUpdate();
			this.$emit('today', [this.util.getDate('day'), this.util.getDate('day')]);
		},
		clear() {
			this.param.dateBegin = '';
			this.param.dateEnd = '';
			this.param.data = '';
			this.$forceUpdate();
			this.$emit('clear');
		}
	}
};
</script>

<style lang="scss">
.mcalendar {
	padding: 10px 10px 0px 10px;
	.con {
		padding: 10px 15px 10px 15px;
		background-color: white;
		border-radius: 20px;
		color: $font-c;
		overflow: hidden;
		.icon {
			padding-right: 10px;
			float: left;
			margin-top: 2px;
		}
		.del {
			padding-left: 9px;
		}
		.date {
			float: left;
			width: 60%;
		}
		.label {
			float: right;
			color: $main-color;
			padding-right: 5px;
		}
	}
}
</style>