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
提问时间: 约 6 个月前
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

6月28日 08:30
已选回答
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.

7月1日 00:25
Stephen
Jérémy

Same pb for me, the unavailable-dates key is just not taken into account at all.

7月15日 15:32