日期格式统一调整需求：将日期选择弹窗格式改为dd-mm-yyyy

问题背景 #

页面日期期望显示为dd-mm-yyyy格式，但日期选择弹窗显示mm-dd-yyyy，选择完成后最终显示格式也不符合要求，需要将弹窗内的选择格式和页面最终显示格式统一为dd-mm-yyyy。

解决方案 #

核心是统一日期的格式化与解析逻辑，避免依赖浏览器默认本地化格式，通过自定义函数确保格式一致。以下是修改后的完整代码：

const today = new Date();
let journeyDate = new Date(today),
    returnDate = new Date(today);

// 自定义日期格式化：将Date对象转为dd-mm-yyyy字符串
function formatDateToDMY(date) {
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
}

// 自定义日期解析：将dd-mm-yyyy字符串转为Date对象
function parseDMYToDate(dateStr) {
    const [day, month, year] = dateStr.split('-');
    // Date构造器的月份参数为0-based，需减1
    return new Date(year, month - 1, day);
}

// 初始化日期输入框与星期显示
$(".journey-date").val(formatDateToDMY(journeyDate));
$(".return-date").val(formatDateToDMY(returnDate));

$(".journey-day-name").html(journeyDate.toLocaleString('en-us', { weekday: 'long' }));
$(".return-day-name").html(returnDate.toLocaleString('en-us', { weekday: 'long' }));

// 出发日期变更事件处理
$(".journey-date").change(function () {
    const dateStr = $(this).val();
    const selectedDate = parseDMYToDate(dateStr);
    const journeyDayName = selectedDate.toLocaleString('en-us', { weekday: 'long' });
    $(this).closest(".search-form-date").find(".journey-day-name").html(journeyDayName);
    // 强制输入框保持dd-mm-yyyy格式
    $(this).val(formatDateToDMY(selectedDate));
});

// 返回日期变更事件处理
$(".return-date").change(function () {
    const dateStr = $(this).val();
    const selectedDate = parseDMYToDate(dateStr);
    const returnDayName = selectedDate.toLocaleString('en-us', { weekday: 'long' });
    $(this).closest(".search-form-date").find(".return-day-name").html(returnDayName);
    // 强制输入框保持dd-mm-yyyy格式
    $(this).val(formatDateToDMY(selectedDate));
});

关键修改说明 #

• 替换toLocaleDateString()：原方法依赖浏览器locale，格式不稳定，改用自定义formatDateToDMY函数强制输出dd-mm-yyyy。
• 新增日期解析函数：parseDMYToDate确保能正确识别dd-mm-yyyy格式的字符串，避免直接用new Date()导致的解析错误。
• 锁定输入框格式：在change事件中重新格式化输入值，确保无论选择弹窗返回什么格式，最终显示都统一。
• 第三方弹窗适配（若使用）：如果是jQuery UI Datepicker这类插件，需在初始化时配置格式：

  $(".journey-date, .return-date").datepicker({
      dateFormat: "dd-mm-yyyy"
  });
  

  这样弹窗内的选择界面和返回值都会统一为dd-mm-yyyy。

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