如何更新Easepick中的预设时间范围？

问题描述 #

当前配置的Easepick时间范围预设存在两个问题：

• 页面停留数分钟后点击“past 5 minutes”这类预设，触发的是页面加载时的5分钟前，而非点击时刻的5分钟前
• 希望了解是否支持设置一端为空的时间范围

解决方案 #

1. 实现预设时间实时计算 #

问题根源是初始化时customPreset里的日期值是静态的，页面加载后不再更新。可以通过以下两种方式实现点击时实时计算：

方法一：用动态函数生成预设值

将每个预设的日期数组替换为返回数组的函数，每次点击预设时都会重新计算当前时间：

const minute = 60 * 1000;
const hour = 60 * minute;
const day = 24 * hour;

const picker = new easepick.create({
  element: "#select_start",
  css: ["https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css"],
  format: "D MMM, HH:mm:ss",
  grid: 2,
  calendars: 2,
  plugins: ["RangePlugin", "LockPlugin", "TimePlugin", "PresetPlugin"],
  RangePlugin: {
    elementEnd: "#select_end",
    strict: false
  },
  LockPlugin: {
    maxDate: new Date(),
    minDate: new Date(Date.now() - 30 * day)
  },
  TimePlugin: {
    seconds: true
  },
  PresetPlugin: {
    position: 'left',
    customPreset: {
      'past 5 minutes': () => [new Date(Date.now() - 5 * minute), new Date()],
      'past 15 minutes': () => [new Date(Date.now() - 15 * minute), new Date()],
      'past 30 minutes': () => [new Date(Date.now() - 30 * minute), new Date()],
      'past 1 hour': () => [new Date(Date.now() - 1 * hour), new Date()],
      'past 3 hours': () => [new Date(Date.now() - 3 * hour), new Date()],
      'past 6 hours': () => [new Date(Date.now() - 6 * hour), new Date()],
      'past 12 hours': () => [new Date(Date.now() - 12 * hour), new Date()],
    }
  }
});

方法二：监听picker显示事件更新预设

如果版本不支持函数式预设，可监听show事件，每次打开picker时重新生成预设值：

const minute = 60 * 1000;
const hour = 60 * minute;
const day = 24 * hour;

const picker = new easepick.create({
  element: "#select_start",
  css: ["https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css"],
  format: "D MMM, HH:mm:ss",
  grid: 2,
  calendars: 2,
  plugins: ["RangePlugin", "LockPlugin", "TimePlugin", "PresetPlugin"],
  RangePlugin: {
    elementEnd: "#select_end",
    strict: false
  },
  LockPlugin: {
    maxDate: new Date(),
    minDate: new Date(Date.now() - 30 * day)
  },
  TimePlugin: {
    seconds: true
  },
  PresetPlugin: {
    position: 'left',
    customPreset: {}
  }
});

// 定义更新预设的函数
function updatePresets() {
  const now = new Date();
  picker.PresetPlugin.customPreset = {
    'past 5 minutes': [new Date(now.getTime() - 5 * minute), now],
    'past 15 minutes': [new Date(now.getTime() - 15 * minute), now],
    'past 30 minutes': [new Date(now.getTime() - 30 * minute), now],
    'past 1 hour': [new Date(now.getTime() - 1 * hour), now],
    'past 3 hours': [new Date(now.getTime() - 3 * hour), now],
    'past 6 hours': [new Date(now.getTime() - 6 * hour), now],
    'past 12 hours': [new Date(now.getTime() - 12 * hour), now],
  };
  picker.PresetPlugin.render();
}

// 页面加载时初始化，每次打开picker时更新
updatePresets();
picker.on('show', updatePresets);

2. 设置一端为空的时间范围 #

你的配置中已开启RangePlugin的strict: false，该参数允许其中一个输入框为空。只需在customPreset中将对应位置的值设为null即可：

PresetPlugin: {
  position: 'left',
  customPreset: {
    // 示例：仅设置结束时间为当前，开始时间为空
    'Up to now': [null, new Date()],
    // 示例：仅设置开始时间为1小时前，结束时间为空
    'From 1 hour ago': [new Date(Date.now() - hour), null],
    // 原有实时计算的预设...
    'past 5 minutes': () => [new Date(Date.now() - 5 * minute), new Date()],
  }
}

点击这类预设后，对应的输入框会保持为空，满足一端为空的范围需求。

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