import{c as t,o as e,A as n}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},d=n('

datepicker组件

介绍

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

安装

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

代码演示

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

<nut-datepicker\n    v-model="currentDate"\n    @confirm="confirm"\n    v-model:is-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    :minDate="minDate"\n    :maxDate="maxDate"\n    @confirm="confirm"\n    v-model:is-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    :minDate="minDate"\n    :maxDate="maxDate"\n    type="datetime"\n    @confirm="confirm"\n    v-model:is-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    :minDate="minDate"\n    :maxDate="maxDate"\n    :is-use12-hours="true"\n    @confirm="confirm"\n    v-model:is-visible="show"\n></nut-datepicker>\n

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

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

API

Props

参数	说明	类型	默认值
type	类型，日期’date’，日期时间’datetime’，时间’time’	String	‘date’
isUse12Hours	是否十二小时制度，只限类型为’time’时使用	boolean	false
minuteStep	分钟步进值	number	1
isShowChinese	每列是否展示中文	boolean	false
title	设置标题	string	null
startDate	开始日期	Date	十年前
endDate	结束日期	Date	十年后

Events

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

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