如何实现双参数Vue.js全局过滤器计算两个日期的间隔天数

实现说明 #

先修正你现有代码的2处问题：

• 过滤器定义时名称多了空格，'remainingday ' 要改成 'remainingday'，否则调用时会匹配不到过滤器
• Vue 过滤器传递多参数语法需要调整，原调用写法要改成 <p>{{ '05/10/2021' | remainingday('30/11/2021') }}</p>，过滤器第一个参数是 | 前面的变量，后续参数放在括号内传入

完整过滤器代码 #

以下代码适配你指定的 dd/mm/yyyy 日期格式，同时排除时分秒对天数计算的干扰：

// 日期解析工具：避免不同浏览器对dd/mm/yyyy格式的默认解析异常
function parseDate(dateStr) {
  const [day, month, year] = dateStr.split('/').map(Number)
  // JS的Date月份从0开始计数，所以要减1
  return new Date(year, month - 1, day)
}

Vue.filter('remainingday', function (startDateStr, endDateStr) {
  // 统一转成零点时间戳，排除时分秒影响
  const start = parseDate(startDateStr).setHours(0, 0, 0, 0)
  const end = parseDate(endDateStr).setHours(0, 0, 0, 0)
  const dayMs = 1000 * 60 * 60 * 24
  // 四舍五入避免时区误差
  const diffDays = Math.round((end - start) / dayMs)

  if (diffDays === 0) {
    return 'TODAY'
  } else if (diffDays > 0) {
    return `${diffDays} days after`
  } else {
    return `${Math.abs(diffDays)} days late`
  }
})

固定起始日期为今日的简化版本 #

如果不需要自定义起始日期，固定用当日作为起始，可以直接在过滤器内生成当日日期，调用和代码更简单：
调用代码简化为：

<p>{{ '30/11/2021' | remainingday }}</p>

对应过滤器代码：

function parseDate(dateStr) {
  const [day, month, year] = dateStr.split('/').map(Number)
  return new Date(year, month - 1, day)
}

Vue.filter('remainingday', function (endDateStr) {
  const start = new Date().setHours(0, 0, 0, 0)
  const end = parseDate(endDateStr).setHours(0, 0, 0, 0)
  const dayMs = 1000 * 60 * 60 * 24
  const diffDays = Math.round((end - start) / dayMs)

  if (diffDays === 0) return 'TODAY'
  return diffDays > 0 ? `${diffDays} days after` : `${Math.abs(diffDays)} days late`
})

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