suitDatetimePicker 日期选择组件

说明

该组件主要提供form表单中的日期选择功能，通常封装在其他组件中搭配使用，例如以下使用示例中封装在了suit-form-date组件中。

使用

<template>
	<view class="suit-form-date-class">
		<suit-form-item :labelWidth="labelWidth" :label="label" :required="required" :prop="prop" borderBottom @click.native="click">
			<view class="content-wrapper" v-if="name">
				{{name}}
			</view>
			<view class="placeholder-wrapper" v-else>
				{{placeholder}}
			</view>
			<suit-icon name="youjiantou" size="16" slot="right"></suit-icon>
		</suit-form-item>
		<suit-datetime-picker
			:show="show" 
			:mode="mode" 
			@change="changeHandler" 
			@confirm="confirm" 
			title="选择时间" 
			@cancel="cancel" 
			ref="datetimePicker"
			v-model="dateValue"
			:formatter="formatter"
		/>
	</view>
</template>

参数说明

属性

属性	描述	类型	可选值	默认值
show	用于控制选择器的弹出与收起	Boolean	——	false
mode	展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择	String	——	datetime
title	选择时间的选择框的顶部标题	String	——
formatter	选项格式化函数	Function	——

事件

事件名称	说明	回调参数
change	选择时间变化时触发的事件	String: 选中的时间
cancel	取消选择时间后触发的事件	String: 选中的时间
confirm	确定选择的时间后触发的事件	String: 选中的时间

工具源码及综合示例参考

组件源码 (opens new window) 综合实例 (opens new window)