uniapp微信小程序开发 日期选择组件,结合dayjs和uview实现效果。

组件代码

/**
* @Author: 858834013@qq.com
* @Name: ExpirationDate
* @Date: 2022-01-18
* @Desc: 有效期
*/
<template>
	<div>
		<div @click="getshow">
			<div class="userInfo1">
				<div class="userInfoName">
					<text>有效期</text><text class="red">*</text>
				</div>
				<div class="bodys">
					<input :value="value" 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>
			</div>
		</div>
		<u-datetime-picker :minDate="minData" :show="show" v-model="value" title="选择有效期" @cancel="show=false"
			@confirm="getConfirm" mode="date"></u-datetime-picker>
	</div>
</template>

<script>
	import {
		CommandGetDicListByType
	} from '@/config/api.js'
	import dayjs from 'dayjs'
	export default {
		name: 'CommodityType',
		props: {
			value: {
				type: '',
				default () {
					return {}
				}
			},
			code: {
				type: String,
				default () {
					return ''
				}
			},
			title: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				show: false,
				BelongId: '',
				minData: dayjs().valueOf(),
				datalist: [],
				list: [
					[]
				]
			};
		},
		mounted() {
			this.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
			this.getdata()
		},
		methods: {
			getshow() {
				this.show = true
			},
			getConfirm(e) {
				var that = this;
				console.log(e)
				if (e.value) {
					that.$emit("update:value", dayjs(e.value).format('YYYY-MM-DD'));
				} else {
					that.$emit("update:value", dayjs(that.minData).format('YYYY-MM-DD'));
				}
				this.show = false
			},
			getdata() {
				var that = this;
				that.list[0] = [];
				that.datalist = []
				CommandGetDicListByType({
					params: {
						BeLongId: that.BelongId,
						DType: 'BasicUnit',
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.datalist = res.Data
						that.datalist.forEach((type) => {
							that.list[0].push(type.KeyName)
						});
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo1 {
		width: 630rpx;
		min-height: 157rpx;
		background: rgba(216, 216, 216, 0);
		box-shadow: 0px 1rpx 0px 0px #F2F2F2;
		margin: 0 auto;

		.bodys {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			image {
				width: 32rpx;
			}
		}

		.userInfoName {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding-top: 32rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151852;
			}

			.red {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF5252;
				margin-top: -15rpx;
			}

		}

		.userInfoName2 {
			text {
				color: #BABBCB;
			}

			.red {
				color: #FFD0CF;
			}
		}

		input {
			margin-top: 8rpx;
			color: #474A77;
			font-size: 32rpx;
			z-index: 1;
			position: relative;
		}

		.disabled {
			color: #C8C8D6;
		}
	}
</style>

使用

<ExpirationDate :value.sync="data.ExpirationDate"></ExpirationDate>