ETU组件库

Appearance

Return to top
On this page

DatePicker 日期选择器

显示当前页面的路径，快速返回之前的任意页面。

基础用法

以”日“为基本单位，基础的日期选择控件

<template>
  <div>
    <etu-date-picker v-model="value"></etu-date-picker>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref("");
</script>

<template>
  <div>
    <etu-date-picker v-model="value"></etu-date-picker>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref("");
</script>

其他日期单位

通过扩展基础的日期选择，可以选择月、年

year:
month:
<template>
  <div
    style="display: flex; justify-content: space-around: gap: 20px"
  >
    <div style="width: 100%">
      <div>year:</div>
      <etu-date-picker type="year" v-model="value1"></etu-date-picker>
    </div>
    <div style="width: 100%">
      <div>month:</div>
      <etu-date-picker type="month" v-model="value2"></etu-date-picker>
    </div>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { ref } from "vue";
const value1 = ref("");
const value2 = ref("");
</script>

<template>
  <div
    style="display: flex; justify-content: space-around: gap: 20px"
  >
    <div style="width: 100%">
      <div>year:</div>
      <etu-date-picker type="year" v-model="value1"></etu-date-picker>
    </div>
    <div style="width: 100%">
      <div>month:</div>
      <etu-date-picker type="month" v-model="value2"></etu-date-picker>
    </div>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { ref } from "vue";
const value1 = ref("");
const value2 = ref("");
</script>

选择一段时间

To 
<template>
  <div>
    <etu-date-picker type="daterange" v-model="values"></etu-date-picker>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { reactive } from "vue";
const values = reactive([]);
</script>

<template>
  <div>
    <etu-date-picker type="daterange" v-model="values"></etu-date-picker>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { reactive } from "vue";
const values = reactive([]);
</script>

日期格式

使用 format 指定输入框的格式。 使用 value-format 指定绑定值的格式。

<template>
  <div>
    <etu-date-picker format="YYYY/MM/DD" v-model="value"></etu-date-picker>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref("2002-01-01");
</script>

<template>
  <div>
    <etu-date-picker format="YYYY/MM/DD" v-model="value"></etu-date-picker>
  </div>
</template>

<style scoped></style>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref("2002-01-01");
</script>

DatePicker 属性

属性名说明类型默认值
model-value / v-model绑定值，如果它是数组，长度应该是 2Date / number / string / Array—
readonly只读booleanfalse
disabled禁用booleanfalse
placeholder是否为全屏 Dialogstring-
type显示类型stringdate
format显示在输入框中的格式stringYYYY-MM-DD HH:mm:ss

DatePicker 插槽

名称说明
default自定义默认内容

DatePicker 方法

事件名说明类型
change用户确认选定的值时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function
visible-change当 DatePicker 的下拉列表出现/消失时触发Function