如何修改AIR DATEPICKER插件的日期格式为yyyy-mm-dd 时分形式？

我在页面的日期时间字段中使用Air Datepicker插件，默认占位符的日期格式为2022-09-01，但从日历选择日期后，显示的值为22 September 2022 00:00 am。我希望获取的日期值格式为2022-09-22 00:00 am，请问该如何修改日期格式？

现有代码 #

HTML代码 #

<input type="text" class="form-control col-md-2 datetimepicker d-inline" id="dfield" name="scheduleField" value=""/>

JavaScript代码 #

const dateInput = document.getElementById("dfield");
// 使用访问者时区
//dateInput.value = formatDate();
dateInput.value = new Date().toISOString().split("T")[0];

function padTo2Digits(num) {
  return num.toString().padStart(2, "0");
}

function formatDate(date = new Date()) {
  return [
    date.getFullYear(),
    padTo2Digits(date.getMonth() + 1),
    padTo2Digits(date.getDate()),
  ].join("-");
  // dateInput.value = new Date().toISOString().split('T')[0];
}

解决方案 #

Air Datepicker自带日期格式配置项，无需额外编写独立格式化函数，直接在初始化插件时指定dateFormat参数即可实现需求。

修改后的JavaScript代码如下：

const dateInput = document.getElementById("dfield");

// 初始化Air Datepicker并配置格式
new AirDatepicker(dateInput, {
  dateFormat: "yyyy-MM-dd hh:mm aa", // 目标格式：年-月-日 时:分 上午/下午
  autoClose: true, // 可选：选择日期后自动关闭日历面板
  
  // 初始化时设置符合格式的当前日期
  onReady() {
    dateInput.value = formatDateTime(new Date());
  },
  
  // 选择日期后同步格式化显示
  onSelect({ date }) {
    dateInput.value = formatDateTime(date);
  }
});

// 辅助函数：生成指定格式的日期时间字符串
function padTo2Digits(num) {
  return num.toString().padStart(2, "0");
}

function formatDateTime(date = new Date()) {
  const hours12 = padTo2Digits(date.getHours() % 12 || 12);
  const minutes = padTo2Digits(date.getMinutes());
  const period = date.getHours() >= 12 ? "pm" : "am";
  
  return `${date.getFullYear()}-${padTo2Digits(date.getMonth() + 1)}-${padTo2Digits(date.getDate())} ${hours12}:${minutes} ${period}`;
}

关键说明 #

• dateFormat参数是Air Datepicker的核心格式配置，各占位符含义：
  • yyyy：4位完整年份（如2022）
  • MM：2位月份（01-12）
  • dd：2位日期（01-31）
  • hh：12小时制的小时（01-12）
  • mm：2位分钟（00-59）
  • aa：小写的上午/下午标识（am/pm）
• 如果不需要自定义初始值逻辑，仅通过dateFormat配置即可让插件自动处理选择后的显示格式，只需确保初始值也符合该格式即可。

内容的提问来源于stack exchange，提问作者V.K