front-end/mobile-code/src/components/app-date-picker.vue

<template>
	<view>
		<picker :mode="mode" :value="date" :start="startDate2" :end="endDate2" @change="bindDateChange">
			<slot>
				<view class="uni-input">
					<span v-if="placeholder && !date">{{placeholder}}</span>
					<span v-else>{{date}}</span>
					<span></span>
				</view>
			</slot>
		</picker>
	</view>
</template>

<script>
export default {
	name: 'app-date-picker',
	props: {
		mode: {
			type: String,
			default: 'date'
		},
		placeholder: {
			type: String,
			default: null
		},
		dateVal: {
			type: String,
			default: ''
		},
		startDate: {
			type: String,
			default: ''
		},
		endDate: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			date: null
		}
	},
	watch: {
		dateVal(val) {
			this.date = val
		}
	},
	computed: {
		startDate2() {
			console.log(this.getDate('start'))
			return this.getDate('start')
		},
		endDate2() {
			return this.getDate('end')
		}
	},
	methods: {
		bindDateChange: function(e) {
			let val = e.target.value
			this.date = val
			console.log(val)
			this.$emit('update:dateVal', val)
			this.$emit('change', val)
		},
		getDate(type) {
			const date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()

			if (type === 'start') {
				year = this.startDate
			} else if (type === 'end') {
				year = this.endDate
			}

			month = month > 9 ? month : '0' + month
			day = day > 9 ? day : '0' + day
			return `${year}-${month}-${day}`
		}
	}
}
</script>

<style scoped>
</style>