DatePicker 日期选择器 1.8.27 +

用于选择日期或日期时间。

基础用法

通过标签 <NueDatePicker> 声明一个日期选择器组件。

日期选择

设置 type 为 date 可以选择日期。

<template>
    <nue-date-picker v-model="dateValue" placeholder="选择日期" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dateValue = ref('');
</script>

日期时间选择

设置 type 为 datetime 可以选择日期和时间。

<template>
    <nue-date-picker v-model="datetimeValue" type="datetime" placeholder="选择日期和时间" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const datetimeValue = ref('');
</script>

关于输出格式

不管是什么输入格式，通过组件面板更新后都会转换为 ISO 8601 格式（YYYY-MM-DDTHH:mm:ss.sssZ）输出。当 type="date" 时，时间部分固定为 00:00:00。（可能因时区不同导致 “时” 部分有不同显示，本质为 00:00:00）

禁用状态

通过属性 disabled 设置禁用状态。

<template>
    <nue-date-picker v-model="dateValue" disabled placeholder="禁用状态" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dateValue = ref('2026-03-05');
</script>

清除功能

通过属性 clearable 设置是否显示清除按钮。

<template>
    <nue-date-picker v-model="dateValue" clearable />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dateValue = ref('2026-03-05');
</script>

生命周期 1.8.28 以上版本

通过事件 close 可以在日期选择器关闭时触发回调。

<template>
    <nue-date-picker v-model="dateValue" @close="handleClose" />
</template>

<script lang="ts" setup>
import { NueMessage } from 'nue-ui';
import { ref } from 'vue';

const dateValue = ref('2026-03-05');

const handleClose = () => {
    NueMessage.info('当前日期为：' + dateValue.value);
};
</script>

插槽 1.8.53 以上版本

<NueDatePicker> 组件目前支持如下两个插槽：

#cell 插槽，用于自定义日期单元格的内容。插槽传递出 date（日期对象）、dateStr（日期字符串）和 isCurrentMonth（是否为当前月）三个属性。
#footer 插槽，用于自定义日期选择面板底部的操作按钮。插槽传递出清除函数 clear。

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<string>(new Date().toISOString());
</script>

<template>
    <nue-date-picker size="small" v-model="date" type="datetime" clearable>
        <template #cell="{ date }">
            <nue-div vertical gap="0" align="center">
                <span style="line-height: 1">{{ date.getDate() }}</span>
                <span style="font-size: 10px; line-height: 1">
                    {{ date.getDate() === new Date().getDate() ? '今天' : '' }}
                </span>
            </nue-div>
        </template>
        <template #footer>
            <nue-div vertical gap="0" align="stretch" width="100%">
                <nue-div
                    justify="space-between"
                    align="center"
                    style="height: var(--nue-box-size-sm); padding: 0 var(--nue-padding-sm)"
                >
                    <nue-text size="var(--nue-text-xs)">提醒</nue-text>
                    <nue-switch size="small" style="--nue-switch-height: 1rem" />
                </nue-div>
                <nue-div
                    justify="space-between"
                    align="center"
                    style="height: var(--nue-box-size-sm); padding: 0 var(--nue-padding-sm)"
                >
                    <nue-text size="var(--nue-text-xs)">提醒时间</nue-text>
                    <nue-text size="var(--nue-text-xs)">xx : xx</nue-text>
                </nue-div>
                <nue-dropdown style="width: 100%" size="small" placement="right-start">
                    <template #trigger="{ trigger }">
                        <nue-dropdown-item @click="trigger" size="small" use-suffix-icon>
                            提醒周期
                        </nue-dropdown-item>
                    </template>
                    <nue-dropdown-item execute-id="reminder-repeat-day" size="small">
                        每天
                    </nue-dropdown-item>
                    <nue-dropdown-item execute-id="reminder-repeat-week" size="small">
                        每周
                    </nue-dropdown-item>
                </nue-dropdown>
            </nue-div>
        </template>
    </nue-date-picker>
</template>

<style scoped></style>

注意事项

v-model：组件使用 v-model 双向绑定数据，底层实现为 modelValue 属性和 update:modelValue 事件。
日期格式：
- 组件统一输出 ISO 8601 格式
- type="date" 时，返回格式为 YYYY-MM-DDTHH:mm:ss.sssZ（时间部分固定为 00:00:00）
- type="datetime" 时，返回格式为 YYYY-MM-DDTHH:mm:ss.sssZ（时间部分为用户选择的时间）
输入格式支持：
- 支持基本格式：YYYY-MM-DD、YYYY-MM-DD HH:mm
- 支持 ISO 格式：YYYY-MM-DDTHH:mm:ss、YYYY-MM-DDTHH:mm:ssZ、YYYY-MM-DDTHH:mm:ss.SSS+08:00 等
无效日期处理：
- 当传入的日期字符串无法正确解析时，按钮上会显示红色的"无效日期"字样
- 选择面板中的日期和时间默认从当前时间中取值
时间选择：当 type="datetime" 时，可以点击小时或分钟数值进行手动输入修改。
年份/月份选择：点击年份或月份可快速切换到对应选择视图，再次点击即可返回。

组件属性与事件

下方涵盖了 NueDatePicker 组件所有的可用属性与事件。

属性

属性	Type	默认值	说明
`modelValue`	`string`	-	绑定值
`type`	`'date' \| 'datetime'`	`date`	选择器类型
`placeholder`	`string`	`选择日期`	占位符
`disabled`	`boolean`	`false`	是否禁用
`size`	`'small' \| 'large'`	-	尺寸
`clearable`	`boolean`	`false`	是否可清除
`theme`	`string \| string[] \| Record<string, boolean>`	-	主题样式（继承自 GlobalProps）

事件

事件	参数	说明
`update:modelValue`	`value`	值更新事件
`change`	`value`	值变化事件
`clear`	-	清除事件
`close`	-	关闭事件

DatePicker 日期选择器 1.8.27 + ​

基础用法 ​

日期选择 ​

日期时间选择 ​

禁用状态 ​

清除功能 ​

生命周期 1.8.28 以上版本 ​

插槽 1.8.53 以上版本 ​

注意事项 ​

组件属性与事件 ​

属性 ​

事件 ​