Vue中获取日历组件v-model值并格式化日期为mm/dd或mm/dd/yy

一、Vue替代原生document.getElementById获取值的方式 #

你已经用对了Vue的正确姿势：通过v-model双向绑定响应式变量（ref定义的aFromDate、aToDate），不需要再用原生DOM操作获取值，直接访问aFromDate.value就能拿到对应的Date对象。

二、Date对象格式化（转成mm/dd或mm/dd/yy格式） #

方法1：手动编写格式化工具函数

直接写一个处理日期的函数，补零月份和日期后拼接成目标格式：

// 在script中定义格式化函数
const formatDate = (date) => {
  if (!date) return '';
  // Date对象的月份是0-11，需+1后补零
  const month = String(date.getMonth() + 1).padStart(2, '0');
  // 日期补零
  const day = String(date.getDate()).padStart(2, '0');
  // 取年份后两位（mm/dd/yy格式需要）
  const year = String(date.getFullYear()).slice(-2);
  
  // 返回mm/dd格式
  return `${month}/${day}`;
  // 若需要mm/dd/yy格式，替换为：return `${month}/${day}/${year}`;
};

使用时直接调用函数：

// 获取格式化后的起始日期
const formattedFrom = formatDate(aFromDate.value);

方法2：用计算属性实时格式化（推荐）

借助Vue的计算属性实现响应式自动格式化，模板中直接使用即可：

import { ref, computed } from 'vue';

const aFromDate = ref<Date>();
const aToDate = ref<Date>();

// 定义格式化函数
const formatDate = (date) => {
  if (!date) return '';
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const year = String(date.getFullYear()).slice(-2);
  return `${month}/${day}`; // 或 `${month}/${day}/${year}`
};

// 计算属性返回格式化后的日期
const formattedFromDate = computed(() => formatDate(aFromDate.value));
const formattedToDate = computed(() => formatDate(aToDate.value));

模板中直接引用计算属性：

<p>起始日期：{{ formattedFromDate }}</p>
<p>结束日期：{{ formattedToDate }}</p>

内容的提问来源于stack exchange，提问作者Progranoob