如何修改jQuery datetimepicker POST提交时的返回日期格式

我正在使用jQuery datetimepicker插件，将日期显示格式设置为DD/MM/YYYY，当前页面展示的日期效果正常，但我希望在发起post请求提交数据时，日期能以2022-07-22（YYYY-MM-DD格式）传输，与使用HTML5原生datepicker时的提交日期格式一致。该需求既可以在服务端controller层处理，也可以在客户端结合datetimepicker和moment完成配置，优先推荐客户端实现，无需改动服务端逻辑。

当前已有的初始化代码如下：

$(document).ready(function() {
  $.datetimepicker.setDateFormatter('moment');
  $(".datepicker").datetimepicker({
     timepicker: false,          
     format: 'DD/MM/YYYY',
  });
})

客户端实现（推荐） #

以下两种实现方式都不需要改动服务端代码，最终提交行为和原生datepicker完全对齐。

• 方式1：使用插件原生配置分离显示值与提交值（最简便）
  jQuery datetimepicker原生提供altField和altFormat配置项，专门用于区分页面展示格式和实际提交值格式，不需要写额外的转换逻辑：

  $(document).ready(function() {
    $.datetimepicker.setDateFormatter('moment');
    $(".datepicker").datetimepicker({
       timepicker: false,          
       format: 'DD/MM/YYYY', // 页面面向用户展示的日期格式
       altField: '#submitDate', // 关联存储提交值的隐藏输入框
       altFormat: 'YYYY-MM-DD' // 实际提交使用的日期格式
    });
  })
  

  对应页面补充一个隐藏输入框，设置为接口要求的日期参数名即可：

  <!-- 面向用户显示的输入框 -->
  <input type="text" class="datepicker">
  <!-- 实际提交用的隐藏字段，name和接口参数名保持一致 -->
  <input type="hidden" name="date" id="submitDate">
  

  配置完成后，用户选择日期时插件会自动将YYYY-MM-DD格式的标准日期写入隐藏字段，表单提交时会自动携带该字段值。

• 方式2：提交时手动转换格式
  如果你不想新增隐藏字段，可以在发起post请求的逻辑中，借助已引入的moment手动转换格式：

  // 表单提交/发起请求的逻辑中
  const displayValue = $('.datepicker').val();
  // 按照页面展示的格式解析日期，再转为提交需要的标准格式
  const submitValue = moment(displayValue, 'DD/MM/YYYY').format('YYYY-MM-DD');
  // 将submitValue作为日期参数传入post请求即可
  

服务端实现 #

如果不调整前端代码，也可以在controller层接收DD/MM/YYYY格式的日期字符串后，手动解析为日期对象再转换为YYYY-MM-DD格式做后续处理。但这种方式会让接口参数格式和前端展示逻辑强耦合，后续如果修改前端日期展示格式，服务端解析逻辑也要同步修改，维护成本更高，不推荐优先使用。

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