onViewChange( )

Adds an event handler that triggers when the date picker's view changes.

Description

When a site visitor views a new month or year in the date picker, the event handler is triggered. Selecting a new day in the current month doesn't trigger the event handler, as the month in view doesn't change. Each time a site visitor enters the date picker, they initiate the view, triggering the event handler. You can pass an optional operation() function parameter. If provided, the operation() function is called first, and the handler function only triggers after the operation finishes. You can pass an optional timeout parameter to specify how long to wait for the operation to return. If the operation doesn't resolve before the timeout, an error is returned. When the operation() function returns, the returned object is passed to the event handler in the options.operationResult object.

Note: The operation() function is called each time the month or year changes and the onViewChange event is triggered. If the operation() function takes time to return, there can be more than one instance of the function running when a site visitor clicks multiple times on the next month arrow. In these cases, only the last triggered operation is returned to the event handler and the handler only runs once. For example, if the date picker's view is in May, and a site visitor clicks the next month arrow 3 times, the operation function is called for June, July, and August. However, the handler is only called only once with the result from the operation for August.

Authorization

Request

This endpoint does not take any parameters

Status/Error Codes

Was this helpful?

Get the month's start and end date dates when the date picker's view changes

Copy Code

1$w('#myDatePicker').onViewChange((event) => {
2    let startDate = event.options.startDate; // "Tue Mar 01 2022 00:00:00 GMT-5 (Eastern Standard Time)"
3    let endDate = event.options.endDate; // "Thu Mar 31 2022 23:59:59 GMT-5 (Eastern Standard Time)"
4  });

Set the disabledDateRanges property using public Holiday dates

The example is for when the date picker's view changes.

Copy Code

1const timeout = 2000;
2
3$w.onReady(function () {
4  $w('#datePicker1').onViewChange(handler, operation, timeout);
5});
6
7async function operation() {
8  // get a list of public holidays from the web 
9  const listOfPublicHolidays = await getInfoFromTheWeb(); 
10  return listOfPublicHolidays;
11}
12
13function handler(event) {
14  const holidays = [];
15  let publicHoliday;
16  // get a list of public holidays from the web 
17  let listOfPublicHolidays = event.options.operationResult;
18  listOfPublicHolidays.forEach(holiday => {
19    publicHoliday = {
20      startDate: holiday.startDate,
21      endDate: holiday.endDate
22    }
23    holidays.push(publicHoliday);
24  })
25  $w('#datePicker1').disabledDateRanges = holidays;
26}
27
28function getInfoFromTheWeb() {
29  // fetch a list of public holidays from an API on the web
30
31  /* sample return object:
32  return [
33    {
34      startDate: new Date('12/31/2022'),
35      endDate: new Date('01/01/2023')
36    },
37    {
38      startDate: new Date('12/25/2022'),
39      endDate: new Date('12/25/2022')
40    }
41  ]
42  */
43}

Set the enabledDateRanges property using available booking slot dates

The example is for when the date picker's view changes.

Copy Code

1import wixBookings from 'wix-bookings';
2
3const myBookingsServiceId = // get my booking service ID
4const timeout = 2000;
5
6$w.onReady(function () {
7  $w('#myDatePicker').onViewChange(handler, operation, timeout);
8});
9
10async function operation({options}) {
11  const {startDate, endDate} = options;
12  const availability = await wixBookings.getServiceAvailability(myServiceId, {startDateTime: startDate, endDateTime: endDate});
13  return availability;
14}
15
16function handler(event) {
17  let availableDates = [];
18  const slots = event.options.operationResult.slots;
19  slots.forEach(slot => {
20    if (slot.bookable === true) {
21      const availableSlot = {
22        startDate: slot.startDateTime,
23        endDate: slot.startDateTime
24      }
25      availableDates.push(availableSlot);
26    }
27  })
28  $w('#datePicker1').enabledDateRanges = availableDates;
29}
30
31
32
33