JavaScript日期格式化实践：从基础到日期选择器集成

/**
 * 将单个数字补零至两位数。
 * @param {number} num - 需要补零的数字。
 * @returns {string} 补零后的两位数字字符串。
 */
function padTo2Digits(num) {
  return num.toString().padStart(2, "0");
}

/**
 * 将JavaScript Date对象格式化为YYYY-MM-DD字符串。
 * @param {Date} [date=new Date()] - 要格式化的Date对象，默认为当前日期。
 * @returns {string} 格式化后的日期字符串，例如 "2023-01-15"。
 */
function formatDateToYYYYMMDD(date = new Date()) {
  const year = date.getFullYear();
  const month = padTo2Digits(date.getMonth() + 1); // 月份需要加1
  const day = padTo2Digits(date.getDate());
  return `${year}-${month}-${day}`;
}

// 示例用法：
const today = new Date();
console.log("当前日期 (YYYY-MM-DD):", formatDateToYYYYMMDD(today)); // 输出: "2023-10-27" (假设今天)

const specificDate = new Date(2022, 8, 1); // 2022年9月1日 (月份索引为8)
console.log("特定日期 (YYYY-MM-DD):", formatDateToYYYYMMDD(specificDate)); // 输出: "2022-09-01"

/**
 * 将JavaScript Date对象格式化为YYYY-MM-DD HH:MM字符串。
 * @param {Date} [date=new Date()] - 要格式化的Date对象，默认为当前日期。
 * @returns {string} 格式化后的日期时间字符串，例如 "2023-01-15 14:30"。
 */
function formatDateTimeToYYYYMMDDHHMM(date = new Date()) {
  const year = date.getFullYear();
  const month = padTo2Digits(date.getMonth() + 1);
  const day = padTo2Digits(date.getDate());
  const hours = padTo2Digits(date.getHours());
  const minutes = padTo2Digits(date.getMinutes());

  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// 示例用法：
const now = new Date();
console.log("当前日期时间 (YYYY-MM-DD HH:MM):", formatDateTimeToYYYYMMDDHHMM(now)); // 输出: "2023-10-27 10:30" (假设当前时间)

// 如果需要固定时间，例如 00:00 am，可以在函数外部处理或在函数内部根据需求调整
// 假设用户选择的日期是 2022-09-22，但时间固定为 00:00
const selectedDate = new Date(2022, 8, 22); // 2022年9月22日
selectedDate.setHours(0, 0, 0, 0); // 将时间设置为午夜
console.log("固定时间 (YYYY-MM-DD 00:00):", formatDateTimeToYYYYMMDDHHMM(selectedDate)); // 输出: "2022-09-22 00:00"

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

// JavaScript 初始化 Air Datepicker (假设其API类似jQuery UI Datepicker)
$(document).ready(function() {
  $('#dfield').datepicker({
    // 假设 Air Datepicker 支持 'yyyy-mm-dd' 作为格式字符串
    // 请查阅 Air Datepicker 的官方文档以获取正确的格式化字符串
    dateFormat: 'yyyy-mm-dd', 
    // 如果需要时间，可能还有 timeFormat 选项或不同的 dateFormat 语法
    // 例如：dateFormat: 'yyyy-mm-dd HH:MM'
    onSelect: function(formattedDate, dateObject) {
      // 当日期被选中时，formattedDate 应该已经是期望的格式
      // dateObject 是一个 JavaScript Date 对象
      console.log("插件格式化后的日期:", formattedDate);
      console.log("Date对象:", dateObject);
    }
  });

  // 初始化时设置输入框的默认值
  // 这里的逻辑与用户原始代码类似，确保初始值也是 YYYY-MM-DD 格式
  const dateInput = document.getElementById("dfield");
  if (dateInput) {
    dateInput.value = formatDateToYYYYMMDD(new Date());
  }
});

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

// JavaScript 初始化 Air Datepicker
$(document).ready(function() {
  $('#dfield').datepicker({
    // ... 其他配置 ...

    // 当用户选择日期后触发
    onSelect: function(formattedDate, dateObject) {
      // formattedDate 是插件默认输出的字符串格式，我们可能不需要它
      // dateObject 是一个标准的 JavaScript Date 对象，我们可以对其进行自定义格式化

      // 示例：将选中的日期格式化为 YYYY-MM-DD 00:00
      dateObject.setHours(0, 0, 0, 0); // 将时间部分重置为午夜
      const customFormattedValue = formatDateTimeToYYYYMMDDHHMM(dateObject);

      // 将自定义格式化后的值设置回输入框
      $(this).val(customFormattedValue);

      console.log("自定义格式化后的日期时间:", customFormattedValue);
    }
  });

  // 初始化时设置输入框的默认值
  const dateInput = document.getElementById("dfield");
  if (dateInput) {
    const initialDate = new Date();
    initialDate.setHours(0, 0, 0, 0); // 确保初始值也是 00:00
    dateInput.value = formatDateTimeToYYYYMMDDHHMM(initialDate);
  }
});