更新 Easepick 中的预设范围

Question

我正在使用以下Easepick：

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/[email protected]/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(new Date().getTime() - (30 * day))
  },
  TimePlugin: {
    seconds: true
  },
  PresetPlugin: {
    position: 'left',
    customPreset: {
      'past 5 minutes': [new Date(new Date().getTime() - (5 * minute)), new Date()],
      'past 15 minutes': [new Date(new Date().getTime() - (15 * minute)), new Date()],
      'past 30 minutes': [new Date(new Date().getTime() - (30 * minute)), new Date()],
      'past 1 hour': [new Date(new Date().getTime() - (1 * hour)), new Date()],
      'past 3 hours': [new Date(new Date().getTime() - (3 * hour)), new Date()],
      'past 6 hours': [new Date(new Date().getTime() - (6 * hour)), new Date()],
      'past 12 hours': [new Date(new Date().getTime() - (12 * hour)), new Date()],
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>

<input id="select_start" placeholder="1 hour ago" size="13" autocomplete="off"> to
<input id="select_end" placeholder="now" size="13" autocomplete="off">

如果我在页面上闲逛了几分钟，然后点击“过去 5 分钟”预设范围，这是 5 分钟自我加载页面起，而不是 5 分钟自点击时间起。

我必须在开始时设置 Easepick，但是有什么方法可以更新或重新计算范围吗？或者我可以有一个其中一个数字为空的范围吗？

Answer 1

有点hacky，但我成功了：

const minute = 60 * 1000;
const hour = 60 * minute;
const day = 24 * hour;
const demoDate = new Date();

const picker = new easepick.create({
  element: "#select_start",
  css: ["https://cdn.jsdelivr.net/npm/@easepick/[email protected]/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(new Date().getTime() - (30 * day))
  },
  TimePlugin: {
    seconds: true
  },
  PresetPlugin: {
    position: 'left',
    customPreset: {
      "past 5 mins": [new Date(demoDate.getTime() - 5 * minute), demoDate],
      "past 15 mins": [new Date(demoDate.getTime() - 15 * minute), demoDate],
      "past 30 mins": [new Date(demoDate.getTime() - 30 * minute), demoDate],
      "past 1 hour": [new Date(demoDate.getTime() - 1 * hour), demoDate],
      "past 3 hours": [new Date(demoDate.getTime() - 3 * hour), demoDate],
      "past 6 hours": [new Date(demoDate.getTime() - 6 * hour), demoDate],
      "past 12 hours": [new Date(demoDate.getTime() - 12 * hour), demoDate]
    },
  },

  setup(picker) {
    picker.on("select", (event) => {
      /* if it's a preset time range (not individually selected) */
      if (!event.target.innerHTML.includes("selected")) {
        const span = event.detail.end - event.detail.start;
        console.log(span / minute + " minutes");
        picker.setStartDate(new Date(new Date().getTime() - span));
        picker.setEndDate(new Date());
      }
    });
  }
});

<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>

<input id="select_start" placeholder="1 hour ago" size="15" autocomplete="off"> to
<input id="select_end" placeholder="now" size="15" autocomplete="off">