smart-app/components/range-datetime.vue

<template>
	<view class="datatime">
		<view class="content" @click="onShowDatePicker(type)">
			<text v-if="date">{{date}}</text>
			<text v-else-if="time">{{time}}</text>
			<text v-else-if="datetime">{{datetime}}</text>
			<text v-else-if="range.length > 0&&range[0]">{{range[0] == range[1] ? range[0] : range[0] +'  至 ' + range[1]}}</text>
			<text v-else-if="rangetime.length > 0&&rangetime[0]">{{rangetime[0] == rangetime[1] ? rangetime[0] : rangetime[0] +'  至 ' + rangetime[1]}}</text>
			<text v-else>请选择</text>
		</view>
		<view class="fix-bg">
			
		</view>
		<mx-date-picker style="color: #000;" :format="format" :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default {
	components: {
	    MxDatePicker
	},
	/**
	 * 数据
	 */
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		//类型，可选值：date（日期）、time（时间）、datetime（日期时间）、range（日期范围）、rangetime（日期时间范围）
		type: {
			type: String,
			default: 'range'
		},
		format:{
			type: String,
			default: 'yyyy.mm.dd hh:ii:ss'
		},
		defaultValue:{
			default: ''
		}
	},

	/**
	 * 数据
	 */
	data() {
		return {
			showPicker: false,
			date: '',
			time: '',
			datetime: '',
			range: [],
			rangetime: [],
			// type: 'rangetime',
			value: ''
		};
	},
	
	/**
	 * 监听数据
	 */ 
	// watch: {
	// 	// 默认值
	// 	defaultValue() {
	// 		// 设置默认值
	// 		this.setDefaultValue();
	// 	}
	// },

	/**
	 * 组件初次加载完成
	 */
	mounted() {
		this[this.type] = this.defaultValue;
	},

	/**
	 * 方法
	 */
	methods: {
		onShowDatePicker(type){//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		onSelected(e) {//选择
			this.showPicker = false;
			if(e) {
				this[this.type] = e.value;
				this.$emit('change',e)
				//选择的值
				//console.log('value => '+ e.value);
				//原始的Date对象
				//console.log('date => ' + e.date);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* .content {
	 text-align: right;
	 margin-right: 60px!important;
	 color: white;
} */
.picker{
	background-color: rgba(0, 0, 0, 0.5);
}
</style>