skip to Main Content

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/[email protected]/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() {
});

2

Answers


  1. On the second line
    "const picker = new easepick.create({"
    You forgot to add the second ).

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search