如何在JavaScript的flatpickr中去除日期单数字前的前置零？

云原生阿岚

2026-8-2

解决Flatpickr日期格式前置零问题

你的问题出在Flatpickr的格式符用错了，而且额外加的year/month/day参数对Flatpickr无效——它只认dateFormat里的格式规则。

要实现单数字日/月不显示前置零，得用对应的格式符：

不带前导零的月份：n（取值1-12）
不带前导零的日期：j（取值1-31）

修改后的代码如下：

var endDatePicker = flatpickr("#end-date-picker", {
  enableTime: false,
  singleDate: true,
  selectForward: false,
  dateFormat: "M j, Y", // j确保日期不带前置零，原d效果一致，用j更明确
  onChange: function(selectedDates, dateStr, instance) {
    document.getElementById("end-str-date").innerHTML = dateStr;
  }
});

// Set calendar for table field
  
var StartDatePicker = flatpickr("#beg-date-picker", {
  enableTime: false,
  singleDate: true,
  selectForward: false,
  dateFormat: "n/j/Y", // 替换m/d/Y，n是无前置零月份，j是无前置零日期
  onChange: function(selectedDates, dateStr, instance) {
    document.getElementById("beg-str-date").innerHTML = dateStr;
  }
});

关键修改说明：

第二个日期选择器的dateFormat从m/d/Y改成n/j/Y：m是带前导零的月份（01-12），换成n就变成1-12；d是带前导零的日期（01-31），换成j就变成1-31。
删掉无效的year/month/day参数，Flatpickr不支持这些配置项，只会根据dateFormat解析格式。
第一个选择器的dateFormat里的d本身就是不带前置零的日期（Flatpickr中dd才是带前导零的日期），换成j效果一致，可按需选择。