import{c as t,o as e,D as n}from"./index.d870aa4d.js";const o={class:"markdown-body"},d=n('

Datepicker组件

介绍

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

安装

import { createApp } from 'vue';\nimport { DatePicker } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(DatePicker);\n

代码演示

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

<nut-datepicker\n    v-model="currentDate"\n    @confirm="confirm"\n    v-model:visible="show"\n    :is-show-chinese="false"\n></nut-datepicker> \n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const show = ref(false);\n    const desc = ref('2020-1-1');\n\n    return {\n      show,\n      desc\n      open: (index) => {\n        show.value = true;\n      },\n      confirm: (res) => {\n        desc.value = val.join('-');\n      }\n    };\n  }\n});\n</script>\n

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

<nut-datepicker\n    v-model="currentDate"\n    :min-date="minDate"\n    :max-date="maxDate"\n    @confirm="confirm"\n    v-model:visible="show"\n    :is-show-chinese="false"\n></nut-datepicker> \n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const show = ref(false);\n    const desc = ref('2020-1-1');\n\n    return {\n      show,\n      desc,\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      open: (index) => {\n        show.value = true;\n      },\n      confirm: (res) => {\n        desc.value = val.join('-');\n      }\n    };\n  }\n});\n</script>\n

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

<nut-datepicker\n    v-model="currentDate"\n    :min-date="minDate"\n    :max-date="maxDate"\n    type="datetime"\n    @confirm="confirm"\n    v-model:visible="show" \n></nut-datepicker> \n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const show = ref(false);\n    const desc = ref('2020年-1月-1日-0时-0分');\n\n    return {\n      show,\n      desc,\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      open: (index) => {\n        show.value = true;\n      },\n      confirm: (res) => {\n        desc.value = val.join('-');\n      }\n    };\n  }\n});\n</script>\n

时间选择-12小时制

<nut-datepicker\n    v-model="currentDate"\n    type="time"\n    :min-date="minDate"\n    :max-date="maxDate"\n    :is-use12-hours="true"\n    @confirm="confirm"\n    v-model:visible="show"\n></nut-datepicker>\n

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

<nut-datepicker\n    v-model="currentDate"\n    type="time"\n    :minute-step="5"\n    :min-date="minDate"\n    :max-date="maxDate"\n    :is-use12-hours="true"\n    @confirm="confirm"\n    v-model:visible="show"\n></nut-datepicker>\n

API

Props

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

Events

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

',24),a={expose:[],setup:n=>(n,a)=>(e(),t("div",o,[d]))};export default a;