dateTimePicker

使用实例

<template>
	<u--form labelPosition="left" labelWidth="100" ref="form1">
		<dateTimePicker @getdata="getstartdate">
			<u-form-item label="开始时间" borderBottom ref="item1">
				<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择开始时间" disabled v-model="startdate"
					inputAlign="right" border="none"></u--input>
				<u-icon name="arrow-right"></u-icon>
			</u-form-item>
		</dateTimePicker>
		<dateTimePicker @getdata="getenddate">
			<u-form-item label="到期时间" borderBottom ref="item1">
				<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择到期时间" disabled v-model="enddate"
					inputAlign="right" border="none"></u--input>
				<u-icon name="arrow-right"></u-icon>
			</u-form-item>
		</dateTimePicker>
	</u--form>
</template>

<script>
	import moment from 'moment'
	import dateTimePicker from './dateTimePicker.vue'
	export default {
		components: {
			dateTimePicker
		},
		data() {
			return {
				startdate: '',
				enddate: '',
			};
		},
		methods: {
			getenddate(e) {
				if (e.value) {
					this.enddate = moment(e.value).format("YYYY-MM-DD")
				}
			},
			getstartdate(e) {
				if (e.value) {
					this.startdate = moment(e.value).format("YYYY-MM-DD")
				}
			}
		}
	};
</script>

组件源码

/**
* @Author: 858834013@qq.com
* @Name: dateTimePicker
* @Date: 2022-01-18
* @Desc: 日期时间选择器
*/
<template>
	<div>
		<div @click="show=true">
			<slot></slot>
		</div>
		<u-datetime-picker v-model="dates" :minDate="timestamp" @cancel="show=false" @confirm="getConfirm" :show="show"
			:mode="mode">
		</u-datetime-picker>
	</div>
</template>

<script>
	export default {
		name: 'dateTimePicker',
		components: {},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			mode: {
				type: String,
				default () {
					return 'date'
				}
			},
		},
		data() {
			return {
				show: false,
				dates: Number(moment(moment().format('YYYY-MM-DD HH')).unix()) * 1000,
				timestamp: new Date().valueOf()
			};
		},

		methods: {

			getConfirm(e) {
				if (e.value) {
					this.$emit('getdata', e)
				} else {
					if (e.mode == 'date') {
						e.value = (new Date()).valueOf()
					}
					if (e.mode == 'datetime') {
						e.value = (new Date()).valueOf()
					}
					this.$emit('getdata', e)
				}
				console.log(e)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

gitee

日期组件封装

实例2

<dateTimePicker @getdata="getDateTimePicker">
					<div class="bodys">
						<input v-model="data.ExpirationDate" disabled="" type="text" placeholder="请选择"
							placeholder-style="font-size:32rpx;color: #D5D5E0;" />
						<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
							mode="widthFix"></image>
					</div>
</dateTimePicker>

import moment from 'moment'
import dateTimePicker from "@/components/dateTimePicker/dateTimePicker.vue"
		components: {
			dateTimePicker
		},
// 获取日期
getDateTimePicker(e) {
this.data.ExpirationDate = moment(e.value).format("YYYY/MM/DD") + ' 00:00:00'
},