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

The Freeform 3.10.0 beta is now available! We have overhauled the Freeform Javascript plugin to be more robust and reworked the API to make it way more developer friendly. It's also easier for anyone to adjust or complement form functionality regardless of your particular site setup. Click here to view the revised v3.10 documentation that shows the updates to the datepicker events via the improved Freeform Javascript 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);
    }
  ];
  flatpickr.l10ns.default.firstDayOfWeek = 1; // sets first day of week to Monday
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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: 12/9/2020, 1:26:21 PM