suitFormDate 表单时间选择

说明

表单中直接使用此组件，实现form校验等的统一管理时间。

使用

<template>
	<view>
		<suit-form labelPosition="left" :model="visitorInfo" ref="form" labelWidth="105" :rules="rules">
			<suit-form-date v-model="visitorInfo.dateTime" labelWidth="105" placeholder="请选择来访时间" label="来访时间" prop="dateTime" @confirm="timeConfirm"/>
		</suit-form>
	</view>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        dateTime: [{
          required: true,
          message: '请选择来访时间'
        }]
      },
      visitorInfo: {
        dateTime: ''
      }
    }
  },
  created(){
		this.visitorInfo.dateTime = Number(new Date())
	},
  methods: {
    timeConfirm(e){
			this.visitorInfo.dateTime = e.value
		}
  }
}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	String	传入 suitForm 组件的 model 中的字段	——
label	标签文本	String	——	——
labelWidth	标签文本的宽度	String | Number	45	——
placeholder	占位文本	String	——	请输入
value	表单绑定的数据	String | Number	——	——
mode	展示格式	String	date为日期选择，time为时间选择，year-month为年月选择	datetime

事件

事件名称	说明	回调参数
confirm	点击确定按钮，返回当前选择的值	包含组件绑定值(见下图)
change	当选择值变化时触发	包含组件绑定值(见下图)
cancel	点击取消按钮	——

组件源码及综合示例参考

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