Updating preset ranges in Easepick

I'm using the following 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/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(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/bundle@1.2.1/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">

If I mess around on the page for a few minutes, then click the "past 5 minutes" preset range, it's 5 minutes since I loaded the page, not 5 minutes since the time of the click.

I have to set up the Easepick at the beginning, but is there any way I can update or recalculate the ranges? Or can I have a range where one of the numbers is null?

Solution

A bit hacky, but I got it working:

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/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(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/bundle@1.2.1/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">