Skip to content
官方QQ交流群
pc端ui:468705115   点此加入
移动端ui:468217742   点此加入
技术交流1:87208295   点此加入
技术交流2:787747122   点此加入
官网
云控制台
开放平台
关注微信公众号
代码仓库: 码云

cv-datetime-range 日期和时间区间

简要

选择日期时间区间
同时选择两个日期和时间。

示例

::: demo

vue
<template>
  <div>
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px">
      <cv-datetime-range value-format="timestamp" v-model="formData.datetimeRange1" />
      <cv-datetime-range v-model="formData.datetimeRange2" />
      <cv-datetime-range v-model="formData.datetimeRange3" pickerOptions />
    </div>
    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        // datetimeRange: ["2000-10-10 18:20:20", "2000-10-10 18:20:20"]
        datetimeRange: [1618818450, 1618818450]
      }
    };
  },
  methods: {
    hanldeSubmit() {
      console.log('最后的formData', this.formData);
    }
  }
};
</script>

:::

属性

属性名类型默认值说明可选值
startPlaceholderString-第一个输入框占位文本-
rangeSeparatorString-两个输入框中间的占位文本-
endPlaceholderString-第二个输入框占位文本-
v-modelString-数据双向绑定-
sizeString-尺寸medium / small / mini
valueFormatString-指定绑定值的格式,默认接收并返回格式化的字符串时间timestamp(时间戳)
pickerOptionsBooleanfalse是否开启快捷选项

Copyright © 2017 10yun.com | 十云提供计算服务-IPV6 | ctocode组开发