在Vue与KendoUI中如何将DatePicker初始设为空并获取格式化值？

核心需求回顾 #

• 初始输入框为空
• 选择/输入日期后，获取YYYYMMDD格式的字符串值
• 不使用jQuery

问题代码分析 #

1. 第一段代码（无法获取格式化值）：
   • 用v-model绑定空字符串，Kendo DatePicker对空字符串的处理不如null可靠，且v-model返回的是Date对象，不是格式化后的字符串，自然拿不到YYYYMMDD格式值。
2. 第二段代码（无法设为空初始）：
   • 初始值设为当前日期的格式化字符串，直接违背“初始为空”的需求，同时v-model绑定字符串会导致组件解析异常。

修正后的解决方案 #

通过:value绑定状态、@change事件处理格式化的方式实现需求，以下是完整代码：

<template>
  <kendo-datepicker
    :value="test.day"
    :format="'yyyy-MM-dd'"
    :parse-formats="['yyyyMMdd']"
    @change="handleDateChange"
  ></kendo-datepicker>
</template>

<script>
// 若使用dayjs做格式化，需先引入
import dayjs from 'dayjs';

export default {
  data() {
    return {
      test: {
        day: null, // 用null实现空初始状态，Kendo会识别为空白输入框
        formattedDay: '' // 存储最终需要的YYYYMMDD格式值
      }
    };
  },
  methods: {
    handleDateChange(e) {
      const selectedDate = e.sender.value();
      if (selectedDate) {
        // 方式1：用dayjs格式化
        this.test.formattedDay = dayjs(selectedDate).format('YYYYMMDD');
        
        // 方式2：原生Date API格式化（无需第三方库）
        // const year = selectedDate.getFullYear();
        // const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
        // const day = String(selectedDate.getDate()).padStart(2, '0');
        // this.test.formattedDay = `${year}${month}${day}`;
      } else {
        // 清空选择时重置格式化值
        this.test.formattedDay = '';
      }
    }
  }
};
</script>

关键配置说明 #

• null作为初始值：KendoUI DatePicker会将null直接渲染为空输入框，避免空字符串带来的解析问题。
• :value替代v-model：v-model会自动将绑定值转为Date对象，改用:value可以更灵活控制显示状态，通过@change事件手动处理值的格式化。
• parse-formats配置：允许用户直接输入YYYYMMDD格式的纯数字字符串，组件会自动解析为正确日期。
• format配置：控制输入框显示带横杠的日期格式（yyyy-MM-dd），提升用户输入体验。

内容的提问来源于stack exchange，提问作者Yun-ji Kim