表单提交时如何转换jQuery DatePicker的日期格式？

嗨，我来帮你搞定这个DatePicker显示和提交格式不一致的问题～这里有两个实用的方案，你可以根据自己的需求来选：

方法1：使用altField和altFormat（官方推荐） #

这是DatePicker自带的原生解决方案，专门用来处理「显示一种格式，提交另一种格式」的场景，不用自己写转换逻辑，非常省心。

步骤： #

1. 在页面中添加一个隐藏的输入框，用来存储要提交的日期格式：

<input type="hidden" name="submit_date" class="datepicker-alt">

2. 修改你的DatePicker初始化代码，添加altField和altFormat两个配置项：

$(document).ready(function(){ 
  $('.datepicker').datepicker({ 
    format : 'dd-mm-yyyy', 
    maxDate : new Date(), 
    selectMonths : true, 
    selectYears: d, 
    yearRange: 100,
    // 新增的配置：指定隐藏输入框和提交格式
    altField: '.datepicker-alt',   // 绑定存储提交格式的隐藏输入框
    altFormat: 'yyyy-mm-dd'        // 设置提交用的日期格式
  }); 
});

3. Ajax提交时，直接取隐藏输入框的值即可：

$.ajax({
  url: '你的后端接口地址',
  method: 'POST',
  data: {
    date: $('.datepicker-alt').val() // 这里拿到的就是yyyy-mm-dd格式的日期
  },
  success: function(response) {
    // 处理提交成功后的逻辑
  }
});

方法2：提交前手动转换日期格式 #

如果你不想额外添加隐藏输入框，也可以在Ajax提交前手动把显示的日期转换成需要的格式。

步骤： #

保留你原本的DatePicker初始化代码，然后在提交逻辑里做格式转换：

$(document).ready(function(){ 
  $('.datepicker').datepicker({ 
    format : 'dd-mm-yyyy', 
    maxDate : new Date(), 
    selectMonths : true, 
    selectYears: d, 
    yearRange: 100 
  }); 

  // 监听表单提交事件（或者你触发Ajax的事件）
  $('form').on('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交

    // 用DatePicker的getDate方法获取选中的Date对象
    var selectedDate = $('.datepicker').datepicker('getDate');
    
    // 格式化为yyyy-mm-dd（注意月份是0开始，要加1，且补0确保两位数）
    var submitDate = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`;

    // 发起Ajax请求
    $.ajax({
      url: '你的后端接口地址',
      method: 'POST',
      data: {
        date: submitDate
      },
      success: function(response) {
        // 处理提交成功后的逻辑
      }
    });
  });
});

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