gwlz/jp-mobile/components/jp-datetime-picker/jp-datetime-picker.vue

<template>
		<view style="width: 100%;"
			@tap="show=true"
			:disabled="disabled"
		>
			<u-datetime-picker
			        :show="show"
			        v-model="value1"
			        :mode="mode"
					@cancel="show=false"
					@confirm="TimeChange"
			></u-datetime-picker>
			<u--input
				v-model="label"
				suffixIcon="calendar"
				suffixIconStyle="color: #17a2f8"
				disabled
				disabledColor="#ffffff"
				:placeholder="placeholder"
				border="none"
			></u--input>
		</view>
		       
</template>

<script>
	import moment from 'moment'
	export default {
		data () {
			return {
				show: false,
				value1: Number(new Date()),
				label: ''
			}
		},
		props: {
		    value: {
				type: String,
				default: null
			},
			mode: String,
			placeholder: String,
			disabled: {
				type: Boolean,
				default: false
			}
		},
		watch:{
			value:{
				handler (val) {
					
					if(val === 0) {
						this.label = ''
						return
					}
					const timeFormat = uni.$u.timeFormat
					if(this.mode === 'date') {
						this.label = val
						this.value1 = Number(new Date());
					}else if(this.mode === 'time'){
						this.label = val
						this.value1 = val;
					}else if(this.mode === 'datetime'){
						this.label = val
						this.value1 = Number(new Date())
					}
					
				},
				immediate: true,
				deep: false
			}
		},
		methods:{
			TimeChange(e) {
				const timeFormat = uni.$u.timeFormat
				if(this.mode === 'date') {
					this.label = timeFormat(e.value, 'yyyy-mm-dd')
				}else if(this.mode === 'time'){
					this.label = e.value
				}else if(this.mode === 'datetime'){
					this.label = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				}
				this.$emit('input', this.label)
				this.show = false
			}
		}
	}
</script>