Bootstrap Datepicker范围选择：日期格式输出与显示问题求助

我来帮你搞定这个格式问题！根据你的需求，我们需要分两步处理：让输入框显示Fri, Mar 16, 2018格式，同时点击「检查日期」时输出03/28/2018或03-28-2018样式的日期。

核心思路 #

Bootstrap Datepicker的format选项控制输入框的显示格式，而我们可以通过内置的日期格式化方法，把选中的日期对象转换成你需要的输出格式。

修改后的完整代码示例 #

// 初始化日期范围选择器，配置显示格式
var dateRange = $('#datepicker-wrap').datepicker({
  container: '#datepicker-wrap',
  format: "ddd, MMM DD, YYYY", // 输入框显示：Fri, Mar 16, 2018
  autoclose: true, // 可选：选完日期自动关闭弹窗
  todayHighlight: true // 可选：高亮当前日期
});

// 「检查日期」按钮的点击事件处理
$('#check-date-btn').on('click', function() {
  // 获取开始和结束日期的Date对象
  const startDate = $('#startDatePicker').datepicker('getDate');
  const endDate = $('#endDatePicker').datepicker('getDate');

  if (startDate && endDate) {
    // 转换为MM/DD/YYYY格式（如果要MM-DD-YYYY，把格式字符串改成"MM-DD-YYYY"即可）
    const formattedStart = $.fn.datepicker.DPGlobal.formatDate(startDate, "MM/DD/YYYY");
    const formattedEnd = $.fn.datepicker.DPGlobal.formatDate(endDate, "MM/DD/YYYY");

    // 这里可以替换成你需要的输出逻辑，比如打印到控制台或显示在页面上
    console.log(`开始日期：${formattedStart}`);
    console.log(`结束日期：${formattedEnd}`);
    // 示例：显示到页面元素中
    $('#date-result').text(`选择的日期范围：${formattedStart} 至 ${formattedEnd}`);
  } else {
    alert("请选择完整的开始和结束日期哦！");
  }
});

关键配置说明 #

1. 输入框显示格式：
   用format: "ddd, MMM DD, YYYY"实现Fri, Mar 16, 2018的显示效果，各占位符含义：

   • ddd：星期缩写（Fri）
   • MMM：月份缩写（Mar）
   • DD：两位日期（16）
   • YYYY：四位年份（2018）

2. 输出格式转换：
   通过$.fn.datepicker.DPGlobal.formatDate()方法，把getDate()获取到的原生Date对象，转换成你需要的格式：

   • 要03/28/2018用"MM/DD/YYYY"
   • 要03-28-2018用"MM-DD-YYYY"

额外小技巧（表单提交场景） #

如果是要把格式化后的日期提交到后端，还可以用altFormat和altField配置，把目标格式的日期自动同步到隐藏输入框：

// 给开始日期输入框配置备用格式
$('#startDatePicker').datepicker({
  format: "ddd, MMM DD, YYYY",
  altFormat: "MM/DD/YYYY",
  altField: "#hidden-start-date" // 隐藏输入框ID，提交表单时取这个值即可
});

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