cv-datetime-linkage 日期时间选择 | 五联动 ¶

简要 ¶

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

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-datetime-linkage</view>
      <view class="components-title-d">日期时间选择</view>
    </view>
    <cv-form-base ref="refFormBase">
      <cv-form-item label="日期时间">
        <cv-datetime-linkage label="" v-model="formData.datetime" />
      </cv-form-item>
      <!-- 有默认时间 -->
      <cv-form-item label="日期时间">
        <cv-datetime-linkage v-model="formData.datetime2" />
      </cv-form-item>
      <!-- 有开始时间限制 -->
      <cv-form-item label="日期时间">
        <cv-datetime-linkage v-model="formData.datetime3" start="2020-07-24 12:28" />
      </cv-form-item>
      <!-- 有结束时间限制 -->
      <cv-form-item label="日期时间">
        <cv-datetime-linkage v-model="formData.datetime4" end="2020-08-21 12:00" />
      </cv-form-item>
      <!-- 日期自定义‘/’拼接 -->
      <cv-form-item label="日期时间">
        <cv-datetime-linkage v-model="formData.datetime5" joint="/" />
      </cv-form-item>
      <!-- 有开始和结束时间限制 -->
      <cv-form-item label="日期时间">
        <cv-datetime-linkage v-model="formData.datetime6" start="2020-07-24 12:28" end="2020-08-21 12:00" />
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        datetime: '',
        datetime2: '2020-08-16 19:41', //2020-07-24 12:00
        datetime3: '',
        datetime4: '',
        datetime5: '',
        datetime6: ''
      }
    };
  },
  onLoad() {},
  methods: {}
};
</script>

属性 ¶

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定 (YYYY-MM-dd HH:ii)
placeholder	String	-	占位符
start	String	-	开始时间(YYYY-MM-dd HH:ii)
end	String	-	结束时间(YYYY-MM-dd HH:ii)