suitFormCalendarSelector 表单日历选择组件

背景

小程序表单组件扩展选择日历模式，集成了suit-calendar日历选择组件

使用

<template>
	<view>
		<suit-form-calendar-selector :startDate="startDate" v-model="value" :range="false"
			:clearDate="true" labelWidth="105" placeholder="请选择" label="时间节点" prop="value"
			@confirm="timeConfirm" />
	</view>
</template>
<script>
	import {
		parseTime
	} from '@/utils';
export default {
	data() {
		return {
			startDate: null, 
			value:null,
		};
	},
	created() {
		this.startDate = parseTime(new Date(), '{y}-{m}-{d}')
	},
	methods: {
		timeConfirm(e){
			console.log(e)
		},
	}
};
</script>
<style scoped></style>

参数说明

属性

属性	描述	类型	可选值	默认值
required	是否必填	Boolean	——	false
prop	表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的	String	——	——
label	左侧提示文字	String	——	——
labelWidth	提示文字的宽度，单位rpx	[Number, String]	——	45
placeholder	输入框为空时的占位符	String	——	请输入
date	自定义当前时间，默认为今天	String	——	——
startDate	日期选择范围-开始日期	String	——	——
endDate	日期选择范围-结束日期	String	——	——
range	是否为范围选择	Boolean	——	true
clearDate	弹窗模式是否清空上次选择内容	Boolean	——	true
value	当前日历输入框显示内容	[String, Boolean, Number, Array]	——	null

事件

事件名称	说明	回调参数
confirm	选择日期确定发出	e
close	关闭日期发出	e

组件源码及综合示例参考

组件源码 (opens new window)