cv-datetime-base 日期时间选择框 ¶

简要 ¶

从底部弹起的滚动选择器 | 日期选择器 mode = date 和 mode = time 组合
本组件一般用于日期时间选择
日期时间选择框，一般和表单配合使用，默认为实心白色背景。

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-datetime-base</view>
      <view class="components-title-d">日期时间选择</view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData">
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" />
      </cv-form-item>
      <!-- 有默认选项 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime1" />
      </cv-form-item>
      <!-- 限制开始日期 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" startDate="2020-07-09" />
      </cv-form-item>
      <!-- 限制结束日期 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" endDate="2020-07-09" />
      </cv-form-item>
      <!-- 限制开始时间 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" startTime="09:30" />
      </cv-form-item>
      <!-- 限制结束时间 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" endTime="18:30" />
      </cv-form-item>
      <!-- 分别限制开始日期和时间 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" startDate="2020-07-09" startTime="09:30" />
      </cv-form-item>
      <!-- 分别限制结束日期和时间 -->
      <cv-form-item label="日期时间">
        <cv-datetime-base v-model="formData.datetime" endDate="2020-07-09" endTime="18:30" />
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        datetime: '',
        datetime1: '2020-07-24 12:00'
      }
    };
  },
  onLoad() {},
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.datetime);
    }
  }
};
</script>

属性 ¶

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定
placeholder	String	-	占位符
startDate	String	-	开始日期(YYYY-MM-dd)
endDate	String	-	结束日期(YYYY-MM-dd)
startTime	String	-	开始时间 (hh-mm)
endTime	String	-	结束时间 (hh-mm)