TIP

WE'RE HIRING! 💼

The Solspace team is expanding! If you love Craft CMS and you’re looking for an exciting full-time remote position working on software development for the Freeform and Calendar plugins for Craft and more, we’d love to hear from you!

Check Out Job Listing!

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: 1/15/2020, 4:39:52 PM