Date Picker Events

The Freeform Date & Time field comes packed with a built-in, optional flatpickr instance. The flatpickr instance can be customized with via the following events available through the Freeform JS Plugin:

TIP

To get started with what's available for Flatpickr overrides, check out the available Flatpickr Config Options documentation as well as the Flatpickr Examples documentation.

Before initialization event

This event is fired right before a flatpickr instance is created, allowing you to extend the options that are being passed to the flatpickr instance:

const form = document.getElementById("my-freeform-form");
form.addEventListener("flatpickr-before-init", (event) => {
  // event.detail contains the whole options object that will be
  // passed to the flatpickr intance

  event.detail.static = true;
  event.detail.clickOpens = false;
  event.detail.defaultHour = 8;
  event.detail.disable = [
    // disables Sundays and Saturdays from being available options in datepicker
    function(date) {
      return (date.getDay() === 0 || date.getDay() === 6);
    }
  ];
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

On flatpickr instance ready event

This event is called right after the flatpickr instance is created. You can access it via the event.detail property of the event object:

const form = document.getElementById("my-freeform-form");
form.addEventListener("flatpickr-ready", (event) => {
  // Get the flatpickr instance
  var instance = event.detail;

  // Get the input field
  var input = instance.input;

  // Add bootstrap css classes to the parent element
  // to be able to use "static: true" flatpickr config option
  input.parentNode.classList.add("form-control");
  input.classList.remove("form-control");
  input.style.border = "none";
  input.style.margin = "0px";
  input.style.padding = "0px";
  input.style.width = "100%";
  input.style.outline = "none";
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Last Updated: 7/3/2020, 10:14:08 AM