Vue DevUI
主题

DatePicker 日期选择器

输入或选择日期的组件。

何时使用

当用户需要输入一个日期时；需要点击标准输入框，弹出日期面板进行选择时。

基本用法

选中的日期： 

<template>
  <div class="mb-2">选中的日期： {{eventValue}}</div>
  <d-datepicker :selected-date-change="handleEventValue" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const eventValue = ref<string>('')
    const handleEventValue = (val: string) => {
      eventValue.value = val;
    }

    return {
      eventValue,
      handleEventValue,
    };
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}

.wh200 {
  width: 200px;
}
</style>

自动关闭日期面板

开启 auto-close
关闭 auto-close

<template>
  <div class="mb-2">开启 auto-close</div>
  <d-datepicker auto-close class="mb-1" />
  <d-datepicker :auto-close="true" />

  <div class="mb-2 mt-3">关闭 auto-close</div>
  <d-datepicker class="mb-1" />
  <d-datepicker :auto-close="false" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}
</style>

日期范围选择器

开启 range
关闭 range

<template>
  <div class="mb-2">开启 range</div>
  <d-datepicker range class="mb-1" />
  <d-datepicker :range="true" />

  <div class="mb-2 mt-3">关闭 range</div>
  <d-datepicker class="mb-1" />
  <d-datepicker :range="false" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}
</style>

日期格式化 


<template>
  <d-datepicker format="yyyy-MM-dd hh:mm:ss" class="mb-1" />
  <d-datepicker format="yy-MM-dd" range />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}
</style>

日期起止时间分隔符 


<template>
  <d-input v-model="splitterText" :max-length="1" class="mb-1 wh200"></d-input>
  <d-datepicker range :range-spliter="splitterText" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const splitterText = ref('至')

    return {
      splitterText
    }
  }
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}

.wh200 {
  width: 200px;
}
</style>

DatePicker 参数

参数类型默认说明跳转 Demo
auto-closebooleanfalse可选，选择日期后，是否自动关闭日期面板自动关闭日期面板
rangebooleanfalse可选，是否开启日期区间选择日期范围选择器
formatstringy/MM/dd可选，日期值格式日期格式化
range-spliterstring-可选，在区间选择模式下，分隔起止时间的字符。日期起止时间分隔符
selected-date-changeFunction-可选，子项切换的时候会发出新激活的子项的数据基本用法

日期格式化字符

字符说明规则
y, yy, yyyyyear使用yy时，只显示后2位年份，其他情况显示4位年份。比如yy/MM/dd -> 21/01/02， y/MM/dd -> 2021/01/02
M,MMmonth使用MM时，一位数数字左侧自动补0。比如y/MM/dd -> 2021/01/02，y/M/d -> 2021/1/2
d,dddate规则同M
h,hhhour规则同M；使用24小时表示。
m,mmminute规则同M
s,sssecond规则同M
Contributors
粤A2-20044005号