如何将jQuery datepicker的日期格式原样同步到HTML表格

问题描述 #

尝试了多种实现方案后遇到卡点：需要让jQuery datepicker组件展示的日期格式（参考对比图右侧效果）写入HTML表格时保持完全一致，但实际点击按钮新增表格数据时，单元格内的日期格式不符合预期（参考对比图左侧效果）。

现有核心代码 #

var newRow = table.insertRow(table.length),
cell2 = newRow.insertCell(1), // 日期列
date = document.getElementById("date").value,

其余代码与问题无关，暂不展示。

效果对比 #

问题原因 #

直接读取输入框的value属性时，拿到的是datepicker默认存储的原始日期字符串，和组件面板上格式化后展示的文本不一致，最终导致写入表格的格式不符合预期。

解决方案 #

任选以下一种方案即可解决：

• 初始化datepicker时配置dateFormat参数，指定目标日期格式，配置后输入框的value值会和组件展示的文本完全一致，原有读取value写入表格的逻辑不需要修改。初始化示例：

// 初始化时替换为你需要的日期格式，比如"mm/dd/yy"、"dd/mm/yy"等，和右侧展示效果匹配即可
$("#date").datepicker({
  dateFormat: "yy-mm-dd"
});

• 不修改原有datepicker初始化配置的话，调用datepicker的getDate方法获取日期对象，手动格式化后再写入表格，替换原有日期取值逻辑即可：

// 获取日期对象
var selectedDate = $("#date").datepicker("getDate");
// 按目标格式格式化日期，格式串按需调整
var formattedDate = $.datepicker.formatDate("yy-mm-dd", selectedDate);
// 后续将formattedDate写入单元格即可

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