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
Enviada há cerca de 6 meses
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

28 de junho às 08:30
Resposta selecionada
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.

1 de julho às 00:25
Stephen
Jérémy

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

15 de julho às 15:32