Javascript API

Error check functions

The following function will only work if the widget is set up to display errors:

For the date check, make sure that the checkbox "Show an error message if a date hasn't been selected" is checked in Widget settings
For the time slot check, make sure that the checkbox "Show an error message if a time slot hasn't been selected" is checked in Widget settings

window.Buunto.datePicker.hasDateError()

This function returns true if the date is missing and false otherwise. It doesn't affect the error display on the widget.

window.Buunto.datePicker.hasTimeSlotError()

This function returns true if the time slot is missing and false otherwise. It doesn't affect the error display on the widget.

window.Buunto.datePicker.hasErrors()

This function combines hasDateError() and hasTimeSlotError(), it returns true if the date or the time slot is missing and false otherwise. It doesn't affect the error display on the widget.

window.Buunto.datePicker.checkErrors()

This function returns the same result as the hasErrors() but it also triggers the error display on the widget.

Events

The widget is triggering custom events. You can subscribe to them using document.addEventListener.

BuuntoDatePicker:selectionChange

This event is triggered every time something has been selected or deselected within the Widget. It passes the selection in the event detail.

method: returns either LOCAL_DELIVERY or STORE_PICKUP, when the delivery method selector isn't enabled LOCAL_DELIVERY will be returned by default.
date: returns undefined when the date is unselected, then returns the date in YYYY-MM-DD format.
dateDisplay: returns undefined when the date is unselected, then returns the date in the display format. The display format is different depending on the shop's language.
timeSlot: returns undefined when the time slot is unselected, then returns the selected time slot as an object. For example: { from: "12:00", to: "18:00" }
timeSlotDisplay: returns undefined when the time slot is unselected, then returns the time slot in the display format. The format depends on the shop's current language.

Example:

document.addEventListener("BuuntoDatePicker:selectionChange", (e) => {
  const { method, date, dateDisplay, timeSlot, timeSlotDisplay } = e.detail
  // Your code here.
})

BuuntoDatePicker:displayErrors

This event is called every time the error display is refreshed. It provides a boolean state of the form errors in the event detail.

hasDateError: will be true when the date is missing, false otherwise
hasTimeSlotError: will be true when the time slot is. missing, false otherwise

Example:

document.addEventListener("BuuntoDatePicker:displayErrors", (e) => {
  const { hasDateError, hasTimeSlotError } = e.detail
  // Your code here.
})

BuuntoDatePicker:hasErrors

This event is called for every selection change. It provides a boolean state of the form errors in the event detail.

hasDateError: will be true when the date is missing, false otherwise
hasTimeSlotError: will be true when the time slot is. missing, false otherwise

Example:

document.addEventListener("BuuntoDatePicker:hasErrors", (e) => {
  const { hasDateError, hasTimeSlotError } = e.detail
  // Your code here.
})