Delivery Date

Delivery Date

Combining Calendar and Picker for a Delivery Date

The two fields depend on each other: BookNest delivers on Saturdays only until 15:00. The calendar's change handler narrows the picker's first column. The picker builds its columns each time it opens, so the handler edits params.cols, then moves a now-impossible value back to the first allowed slot:

The calendar's change handler in src/pages/checkout.f7CSS

        on: {
          change(cal, [day]) {
            const allowed = day.getDay() === 6 ? saturdaySlots : slots;
            slotPicker.params.cols[0].values = allowed; // the picker builds its columns on open
            if (!allowed.includes(slotPicker.value?.[0])) {
              slotPicker.setValue([allowed[0], 'Hand to me']);
            }
            console.log(`${day.toDateString()}: slots ${allowed.join(', ')}`);
          },
        },

Tapping Saturday the 26th, then opening the picker, logged one line and showed only two slots (B below):

Output of 55

Sat Sep 26 2026: slots 9-12, 12-15

The delivery-day calendar in iOS, with past days, today and Sunday disabled (A), and the Saturday slots in the picker in Material (B)

The form holds display text, "day":"Sat, Sep 26", so the order sends calendar.getValue()[0].toLocaleDateString('en-CA'), 2026-09-26. toISOString() would convert local midnight to UTC and, east of Greenwich, name the previous day.

MENU