javascriptdatepicker

Callback when choosing date range with the easepick plugin


I am using the easepick plugin to provide my users with a method to choose a date range. But I am struggling to get an event to fire when the data range is chosen. Anyone who can help with solving this problem?

enableEasepick = function() {
  const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    grid: 2,
    zIndex: "1000",
    calendars: 2,
    css: [
      'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'
    ],
    plugins: ['RangePlugin', 'LockPlugin'],
    RangePlugin: {
      tooltipNumber(num) {
        return num - 1;
      },
      locale: {
        one: 'night',
        other: 'nights',
      },
    },
    LockPlugin: {
      minDate: new Date(),
      minDays: 2,
      inseparable: true,
    },

    autoApply: true,
  });
};

The following does not work:

var input = document.getElementById('datepicker');
input.addEventListener("change", function() {
});

Solution

  • Standard event handlers like change will only fire if the field value was changed directly by the user - not if any script sets the value.

    You need to use the custom events provided by this library - https://easepick.com/packages/core.html#events

    select - Event is called when selection is submitted.

    That's probably the one you want here.