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 hace 6 meses aproximadamente
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 junio a las 8:30
Respuesta seleccionada
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 julio a las 0:25
Stephen
Jérémy

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

15 de julio a las 15:32