Datepicker组件

介绍

时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。

安装

  1. import { createApp } from 'vue';
  2. import { DatePicker } from '@nutui/nutui';
  4. const app = createApp();
  5. app.use(DatePicker);

代码演示

日期选择-每列不显示中文

  1. <nut-datepicker
  2.     v-model="currentDate"
  3.     @confirm="confirm"
  4.     v-model:visible="show"
  5.     :is-show-chinese="false"
  6. ></nut-datepicker>
  1. <script>
  2. export default createDemo({
  3.   setup(props, { emit }) {
  4.     const show = ref(false);
  5.     const desc = ref('2020-1-1');
  7.     return {
  8.       show,
  9.       desc
  10.       open: (index) => {
  11.         show.value = true;
  12.       },
  13.       confirm: (res) => {
  14.         desc.value = val.join('-');
  15.       }
  16.     };
  17.   }
  18. });
  19. </script>

日期选择-限制开始结束时间

  1. <nut-datepicker
  2.     v-model="currentDate"
  3.     :min-date="minDate"
  4.     :max-date="maxDate"
  5.     @confirm="confirm"
  6.     v-model:visible="show"
  7.     :is-show-chinese="false"
  8. ></nut-datepicker>
  1. <script>
  2. export default createDemo({
  3.   setup(props, { emit }) {
  4.     const show = ref(false);
  5.     const desc = ref('2020-1-1');
  7.     return {
  8.       show,
  9.       desc,
  10.       minDate: new Date(2020, 0, 1),
  11.       maxDate: new Date(2025, 10, 1),
  12.       open: (index) => {
  13.         show.value = true;
  14.       },
  15.       confirm: (res) => {
  16.         desc.value = val.join('-');
  17.       }
  18.     };
  19.   }
  20. });
  21. </script>

日期时间-限制开始结束时间（有默认值）

  1. <nut-datepicker
  2.     v-model="currentDate"
  3.     :min-date="minDate"
  4.     :max-date="maxDate"
  5.     type="datetime"
  6.     @confirm="confirm"
  7.     v-model:visible="show" 
  8. ></nut-datepicker>
  1. <script>
  2. export default createDemo({
  3.   setup(props, { emit }) {
  4.     const show = ref(false);
  5.     const desc = ref('2020年-1月-1日-0时-0分');
  7.     return {
  8.       show,
  9.       desc,
  10.       minDate: new Date(2020, 0, 1),
  11.       maxDate: new Date(2025, 10, 1),
  12.       open: (index) => {
  13.         show.value = true;
  14.       },
  15.       confirm: (res) => {
  16.         desc.value = val.join('-');
  17.       }
  18.     };
  19.   }
  20. });
  21. </script>

时间选择-12小时制

  1. <nut-datepicker
  2.     v-model="currentDate"
  3.     type="time"
  4.     :min-date="minDate"
  5.     :max-date="maxDate"
  6.     :is-use12-hours="true"
  7.     @confirm="confirm"
  8.     v-model:visible="show"
  9. ></nut-datepicker>

时间选择-分钟数递增步长设置

  1. <nut-datepicker
  2.     v-model="currentDate"
  3.     type="time"
  4.     :minute-step="5"
  5.     :min-date="minDate"
  6.     :max-date="maxDate"
  7.     :is-use12-hours="true"
  8.     @confirm="confirm"
  9.     v-model:visible="show"
  10. ></nut-datepicker>

API

Props

参数说明类型默认值
v-model初始值Datenull
v-model:visible是否可见Booleanfalse
type类型，日期’date’， 日期时间’datetime’，时间’time’String‘date’
is-use12-hours是否十二小时制度，只限类型为’time’时使用Booleanfalse
minute-step分钟步进值Number1
is-show-chinese每列是否展示中文Booleanfalse
title设置标题Stringnull
min-date开始日期Date十年前
max-date结束日期Date十年后

Events

事件名说明回调参数
confirm点击确定按钮时触发event: Event
close关闭时触发event: Event

DatePicker 选择器 - 图1