Naive UI的DatePicker选中日期后文本框没变化怎么办？

宇文英瑞提问于 2026-02-02 08:55:30 阅读 138

组件

我在用Naive UI的DatePicker组件时遇到问题，选中日期后输入框里的文字没更新，但控制台显示变量确实有值，这是为什么？

代码是这样写的：


<template>
  <n-date-picker v-model:value="selectedDate" />
</template>

<script setup>
import { ref } from 'vue'
const selectedDate = ref(null)
</script>

我尝试过把v-model直接绑定到表单对象的属性，也试过用@update:value事件手动赋值，但输入框始终显示为空。控制台打印selectedDate确实有选中的时间戳，但组件就是不渲染显示…

Naive UI

我来解答赞 7 收藏

反馈

2 条解答

UP主～红娟 Lv1

这问题我遇到过，是时区的问题。Naive UI的DatePicker默认用的是UTC时间，如果你选的时间没过转换，显示的时候会出问题。你打印出来的时间戳是对的，但组件渲染的时候用的是本地时间，所以会差8个小时或者其它时区差。

解决方法是加个format属性，把时间格式转成ISO字符串。改成这样：

这样选完时间之后组件会显示正确的时间字符串，不会出现空白的情况。要是你还需要时间戳的话，selectedDate还是保持原来的时间戳，只是显示的时候用format来格式化。

或者你也可以用:to-timezone属性强制转时区，不过最直接的办法还是加format。前端这块时区问题容易踩坑，注意一下就好。

2026-02-06 07:06

Mr.晨曦 Lv1

问题出在 v-model:value 的用法上，Naive UI 的 DatePicker 实际上是用 v-model:formatted-value 来控制显示的文本框内容。你可以这样改：

<template>

  <n-date-picker v-model:formatted-value="selectedDateFormatted" />

</template>



<script setup>

import { ref } from 'vue'

const selectedDateFormatted = ref('')

</script>

如果需要同时绑定时间戳和格式化值，就两个都用上。检查一下官方示例，这种双向绑定坑不少。

2026-02-02 09:01