Viog UI

日期选择器 date-select 待优化

用于选择日期与时间

使用说明

简单引入

你需要通过v-model向该组件绑定一个对象，选择的时间将保存在该对象中，格式为:

{
  year?: number,
  month?: number
  date?: number
  hour?: number,
  minute?: number
  second?: number
}
请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v"></vi-date-select>

<script setup>
  import { reactive } from 'vue'
  const obj = reactive({})
</script>

通过修改beginYear与endYear属性可以指定可选的起始年份和结束年份

请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v" :begin-year="2020" :end-year="2025"></vi-date-select>

样式

通过属性type控制选择器样式

请选择
请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v"></vi-date-select>
<vi-date-select type="button" v-model="obj" class="my-select-v"></vi-date-select>

大小

通过属性size控制选择器大小

请选择
请选择
请选择
请选择
请选择
请选择
展开代码
<vi-date-select size="big" v-model="obj" class="my-select-v"></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v"></vi-date-select>
<vi-date-select size="small" v-model="obj" class="my-select-v"></vi-date-select>
<vi-divider/>
<vi-date-select size="big" type="button" v-model="obj" class="my-select-v"></vi-date-select>
<vi-date-select type="button" v-model="obj" class="my-select-v"></vi-date-select>
<vi-date-select size="small" type="button" v-model="obj" class="my-select-v"></vi-date-select>

禁用

通过属性disabled禁用选择器

请选择
请选择
展开代码
<vi-date-select disabled v-model="obj" class="my-select-v"></vi-date-select>
<vi-date-select disabled type="button" v-model="obj" class="my-select-v"></vi-date-select>

日期时间格式化

通过format传入需要展示的日期时间格式

YYYY代表年，MM代表月，DD代表日，hh代表小时、mm代表分钟、ss代表秒，默认格式为：YYYY-MM-DD hh:mm:ss

请选择
展开代码
<vi-date-select format="YYYY年MM月DD日" v-model="obj" class="my-select-v"></vi-date-select>

最小选择日期单位

通过unit属性定义日期选择器最小单位：year、month、date（默认）

其余无法选择的单位，也可以通过defaultUnit属性传入，默认格式为：

defaultUnit = {
    year: 2000,
    month: 1,
    date: 1,
    hour: 0,
    minute: 0,
    second: 0
}
请选择
请选择
请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v" unit="year"></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v" unit="month"></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v"></vi-date-select>

时间选择

通过time属性开启时间选择

请选择
请选择
请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v" unit="year" time></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v" unit="month" time></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v" time></vi-date-select>

通过timeUnit属性控制选择时间的最小单位（hour、minute、second），默认为minute

请选择
请选择
请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v" timeUnit="hour" time></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v" time></vi-date-select>
<vi-date-select v-model="obj" class="my-select-v" timeUnit="second" time></vi-date-select>

范围选择

通过range属性开启范围选择，此时modelValue对象值情况如下：

{
  year?: number,
  month?: number
  date?: number
  hour?: number,
  minute?: number,
  second?: number,
  endYear?: number,
  endMonth?: number
  endDate?: number
  endHour?: number,
  endMinute?: number,
  endSecond?: number
}
请选择-请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v" time range></vi-date-select>

通过separate属性更换分隔符

请选择至请选择
展开代码
<vi-date-select v-model="obj" class="my-select-v" range></vi-date-select>

Props

select

属性名描述类型默认值

插槽

无插槽

事件支持

无特殊事件

可覆写css变量

变量名描述默认值