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:

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;
})
1
2
3
4
5
6
7
8
9

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/17/2019, 2:45:00 PM