如何将表单提交的input date数据格式化为「日 月份全称 年份」格式

嘿，这个需求太常见啦！我给你两种实用的解决方案，你可以根据自己的技术栈和场景来选：

这种方法适合你希望在提交前就把日期转成目标格式的场景，核心思路是阻止表单默认提交行为，手动处理日期格式后再发送请求。

首先给你的表单和输入框加个ID方便操作，然后写监听逻辑：

<form id="dateForm" action="#">
  <input type="date" name="code" id="dateInput">
  <input type="submit">
</form>

<script>
document.getElementById('dateForm').addEventListener('submit', function(e) {
  // 先阻止表单默认提交
  e.preventDefault();
  
  const dateInput = document.getElementById('dateInput');
  const rawDate = dateInput.value;
  
  // 如果用户没选日期，直接按默认逻辑提交（或者加个提示）
  if (!rawDate) {
    this.submit();
    return;
  }
  
  // 解析原生日期字符串（YYYY-MM-DD）
  const date = new Date(rawDate);
  
  // 转成目标格式：两位数日期 + 月份全称 + 四位年份
  const day = String(date.getDate()).padStart(2, '0'); // 保证日期是两位数，比如6→06
  const month = date.toLocaleString('en-US', { month: 'long' }); // 获取英文月份全称
  const year = date.getFullYear();
  
  const formattedDate = `${day} ${month} ${year}`;
  
  // 构造FormData，替换原来的日期值
  const formData = new FormData(this);
  formData.set('code', formattedDate);
  
  // 发送请求（这里可以替换成你的实际接口地址和请求方式）
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => {
    console.log('提交成功！');
    // 这里可以加跳转、提示等逻辑
  })
  .catch(error => {
    console.error('提交出错了:', error);
  });
});
</script>

注意：如果用户禁用了JavaScript，这个方法就会失效，所以如果需要兼容无JS场景，建议优先考虑后端转换或者做双重处理

这种方法更可靠，不管前端有没有JS，后端都能把接收的YYYY-MM-DD格式转成你要的样式。下面给几个主流后端语言的示例：

PHP示例 #

if (isset($_POST['code'])) {
  $rawDate = $_POST['code'];
  // 解析原生日期格式
  $date = DateTime::createFromFormat('Y-m-d', $rawDate);
  // 转成目标格式：d（两位数日）、F（月份全称）、Y（四位年）
  $formattedDate = $date->format('d F Y');
  // 后续用$formattedDate处理业务逻辑即可
}

Python（Django/Flask通用）示例 #

from datetime import datetime

raw_date = request.POST.get('code')
if raw_date:
    # 解析原生格式
    date_obj = datetime.strptime(raw_date, '%Y-%m-%d')
    # 转成目标格式
    formatted_date = date_obj.strftime('%d %B %Y')

Node.js（Express）示例 #

// 可以用原生Date，也可以用moment.js库
const rawDate = req.body.code;
if (rawDate) {
  // 原生方式
  const date = new Date(rawDate);
  const formattedDate = `${String(date.getDate()).padStart(2, '0')} ${date.toLocaleString('en-US', { month: 'long' })} ${date.getFullYear()}`;
  
  // 或者用moment.js更简洁
  // const moment = require('moment');
  // const formattedDate = moment(rawDate).format('DD MMMM YYYY');
}

两种方法各有优劣：前端处理更灵活，后端处理更稳定。如果是公共站点，建议后端做兜底转换哦！

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