DatePicker Component - unavailable-dates won't work with dynamic data
1

The affected part of my flow is shown below...

The flow works as expected in all regards, however when i send the following data from my endpoint via data exchange the given dates are still available to select in the date picker, and after selecting one of the dates (that should be unavailable) as per payload below and hitting confirm it still moves to the next screen.

DATA PAYLOAD

{
  version: '3.0',
  screen: 'SELECT_DATE',
  data: {
    minDate: '1719582806701',
    maxDate: '1727358805063',
    selectedService: 'QEyhIq',
    selectedStylist: 'flO',
    name: 'xxx',
    phone: '1123',
    waId: '1123',
    email: [...]',
    unavailableDates: [
      '1719619200000', '1719705600000',
      '1720224000000', '1720310400000',
      '1720828800000', '1720915200000',
      '1721433600000', '1721520000000',
      '1722038400000', '1722124800000',
      '1722643200000', '1722729600000',
      '1723248000000', '1723334400000',
      '1723852800000', '1723939200000',
      '1724457600000', '1724544000000',
      '1725062400000', '1725148800000',
      '1725667200000', '1725753600000',
      '1726272000000', '1726358400000',
      '1726876800000', '1726963200000'
    ]
  }
}

SCREEN FLOW JSON

    {
        "id": "SELECT_DATE",
        "title": "Select Date",
        "data": {
            "name": {
                "type": "string",
                "__example__": "steve"
            },
            "waId": {
                "type": "string",
                "__example__": "1123"
            },
            "phone": {
                "type": "string",
                "__example__": "1123"
            },
            "email": {
                "type": "string",
                "__example__": "[...]"
            },
            "minDate": {
                "type": "string",
                "__example__": "1704121049000"
            },         
              "maxDate": {
                "type": "string",
                "__example__": "1704121079000"
            },         
            "selectedService":  {
                "type": "string",
                "__example__": "1704121049000"
            },
            "selectedStylist":  {
                "type": "string",
                "__example__": "1704121049000"
            },
            "unavailableDates": {
                "type": "array",
                "items": {
                    "type": "string"                         
                },
                "__example__": [ "172307160000"]
              }

        },
        "layout": {
            "type": "SingleColumnLayout",
            "children": [
                {
                    "type": "Form",
                    "name": "date_form",
                    "children": [
                        {
                            "type": "DatePicker",
                            "name": "date",
                            "label": "Date",
                            "min-date": "${data.minDate}",
                            "max-date": "${data.maxDate}",
                            "unavailable-dates" : "${data.unavailableDates}",
                            "required": true                                
                        },
                        {
                            "type": "Footer",
                            "label": "Confirm Date",                                
                            "on-click-action": {
                                "name": "data_exchange",
                                "payload": {
                                    "selectedDate": "${form.date}",
                                    "name": "${data.name}",
                                    "phone": "${data.phone}",
                                    "email": "${data.email}",
                                    "waId": "${data.waId}",
                                    "selectedService": "${data.selectedService}",
                                    "selectedStylist": "${data.selectedStylist}"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    },
Stephen
Asked on Friday
Bar

Stephen - have you reviewed these guidelines around the existing limitation with this component? Perhaps this is the cause of the issue?

Let us know if you confirm it's a different issue

June 28 at 8:30 AM
Selected Answer
1

hey thanks for the response, yeah i reviewed the guidelines, and tested with manual generated dates to enusre compliance and it just does not restrict selection of unavaialble dates.

Yesterday at 12:25 AM
Stephen