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
تم طرح السؤال منذ حوالي ‏٦‏ أشهر
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

‏٢٨ يونيو‏‏٨:٣٠ ص‏111
الإجابة المحددة
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.

‏١ يوليو‏‏١٢:٢٥ ص‏111
Stephen
Jérémy

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

‏١٥ يوليو‏‏٣:٣٢ م‏111