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:

You're viewing the v3.9 version of these docs. To switch to the v3.10 docs, click here to view the revised v3.10 documentation that shows usage of the Datepicker with the improved Freeform Javascript plugin.

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
});

On flatpickr instance ready event

This event is called right after the flatpickr instance is created. You can access it via the event.flatpickr 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';
});