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.

window.Buunto.datePicker.getCutOffTime()   

This function returns the first available date and its cut off time. For example:

{
    "firstAvailableDate": "2025-03-02",
    "cutOffTime": "2025-03-01T14:00:00+00:00"
}

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.
• location    : returns undefined    when no location is selected, then returns the selected location as an object. For example: { id: 99462742363 }   . This applies to both pickup and delivery locations.

Example:

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

BuuntoDatePicker:cartAttributesUpdated

This event is triggered after the widget has updated the cart attributes for the current selection. It passes the same selection attributes as BuuntoDatePicker:selectionChange .

Use this event when your custom code needs to run after Buunto has finished saving the selected date, time slot, method, or location to the cart.

Example:

document.addEventListener("BuuntoDatePicker:cartAttributesUpdated", (e) => {
  const { method, date, dateDisplay, timeSlot, timeSlotDisplay, location } = 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.
})

Change the widget's selection

window.Buunto.datePicker.selectDate(date)    

Changes the selected date in the widget. The date parameter can either be a date string in ISO format, or undefined to reset the date.

Examples:

• window.Buunto.datePicker.selectDate("2024-11-26")    
• window.Buunto.datePicker.selectDate(undefined)