DatePicker error

[ingdesarr1]

Question

Good morning. I'm having a problem with DatePicker. I'm trying to use it in a Class, but, when I try to open it, I get the error shown below. But, when I open another element, like a AlertDialog, the DatePicker opens normally. In flet version 0.21, it works fine, but now I'm using flet 0.23.1. What could be generating the error, or how can I solve it? Thanks

Code sample

import flet as ft
import datetime

#Input tipo calendario
class CalendarioInput(ft.Row):
    def __init__(self,label, visible):
        super().__init__()
        self.label=label
        self.visible=visible
        self.dt = ft.DatePicker(
            date_picker_entry_mode=ft.DatePickerEntryMode.CALENDAR_ONLY,
            on_change=self.change_date,
            on_dismiss=self.date_picker_dismissed,
            first_date=datetime.datetime(2023, 1, 1),
            #Ultima sera la fecha actual
            last_date=datetime.datetime(datetime.datetime.now().year, datetime.datetime.now().month, datetime.datetime.now().day),
            data=label   
        )

        self.controls=[
            ft.Container(
                content=ft.Text(
                            f'{self.label}',
                            color='#ffffff',
                            weight=ft.FontWeight.W_500,
                            # size=16,
                            text_align='center'
                        ),
                bgcolor='#0080E5',
                border=ft.border.only(
                    bottom=ft.border.BorderSide(1, "black"),
                    top=ft.border.BorderSide(1, "black"),
                    left=ft.border.BorderSide(1, "black")
                    ),
                width=108,
                height=32,
                alignment=ft.alignment.center,
                padding=ft.padding.only(left=4)
            ),
            ft.Container(
                content=ft.Row([
                    ft.Text(
                            'dd/mm/aaaa',
                            color='#858681',
                    ),
                    ft.Icon(
                            name=ft.icons.CALENDAR_MONTH,
                            color='#0080E5'
                    ),
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN
                ),
                border=ft.border.all(1, "black"),
                # border_radius=ft.border_radius.all(8),
                padding=ft.padding.only(left=8, right=8),
                alignment=ft.alignment.center_left,
                bgcolor='#ffffff',
                on_click=self.abrir_fecha,
                width=216,
                height=32,
            )
        ]

        self.spacing=0
        self.visible=False

       
    def change_date(self,e):
        fecha_escogida = self.dt.value.strftime("%d/%m/%Y")
        self.controls[1].border=ft.border.all(1.5, "#2abbff")
        self.controls[1].content.controls[0].value=fecha_escogida
        self.controls[1].content.controls[0].color='black'
        self.controls[1].content.controls[1].color='#0080E5'
        self.update()

    def date_picker_dismissed(self,e):
        if self.dt.value==None:
            self.controls[1].border=ft.border.all(1, "red")
            self.controls[1].content.controls[0].value='No definido!'
            self.controls[1].content.controls[0].color='red'
            self.controls[1].content.controls[1].color='red'
        else:
            self.controls[1].border=ft.border.all(1.5, "#2abbff")
            self.controls[1].content.controls[0].value=self.dt.value.strftime("%d/%m/%Y")
            self.controls[1].content.controls[0].color='black'
            self.controls[1].content.controls[1].color='#0080E5'
        self.update()

    def abrir_fecha(self,e):
        self.page.open(self.dt)
        self.page.update()

    def did_mount(self):
        self.page.overlay.append(self.dt)

#Clase Padre entradas tipo DropDown
class DropdownFilter(ft.Column):
    def __init__(self, title, options, visible):
        super().__init__()
        truncated_options = [
            ft.dropdown.Option((option.key or '')[:26] + '...') if (option.key and len(option.key) > 26) else option
            for option in options
        ]

        self.visible=visible
            
        self.dropdown = ft.Row([
            ft.Container(
                content=ft.Text(
                    title,
                    weight=ft.FontWeight.BOLD,
                    color='#ffffff',
                ),
                width=108,
                height=32,
                bgcolor='#0080E5',
                alignment=ft.alignment.center,
                border=ft.border.only(
                    bottom=ft.border.BorderSide(1, "black"),
                    top=ft.border.BorderSide(1, "black"),
                    left=ft.border.BorderSide(1, "black")
                ),
            ),
            ft.Container(
                content=ft.Dropdown(
                    width=216,
                    height=32,
                    border_radius=0,
                    content_padding=ft.Padding(left=12, top=0, right=1, bottom=1),
                    border_color='black',
                    border_width=1,
                    hint_style=ft.TextStyle(size=14),
                    hint_text='Selecciona una opción',
                    options=truncated_options,
                    text_size=14,
                    autofocus=True,
                    on_change=self.on_change_dropDown
                ),
                bgcolor='#ffffff'
            )
        ],
            spacing=0,
            visible=True,
            alignment=ft.MainAxisAlignment.CENTER
            
        )

        controls = [self.dropdown]

        self.controls=controls 
        self.visible=True
        self.spacing=4

    def on_change_dropDown(self, e):
        pass

    def build_additional_controls(self):
        pass

    def build(self):
        controls = [self.dropdown]
        additional_controls = self.build_additional_controls()
        if additional_controls:
            controls.extend(additional_controls)

        self.controls = controls

#Clases hijas de DropDown
class DropdownFilterDates(DropdownFilter):
    def __init__(self):
        options = [
            ft.dropdown.Option("Hoy"),
            ft.dropdown.Option("Ultimos 7 dias"),
            ft.dropdown.Option("Ultimo mes"),
            ft.dropdown.Option("Intervalo de fechas"),
        ]
        super().__init__('Fecha', options,visible=True)

    def on_change_dropDown(self, e):
        print(self.page.overlay)
        if e.control.value == 'Intervalo de fechas':
            self.controls[2].visible = True
            self.controls[1].visible = True
        else:
            self.controls[2].visible = False
            self.controls[1].visible = False

        self.update()

    def build_additional_controls(self):
        return [
            CalendarioInput(label='Fecha de inicio', visible=False),
            CalendarioInput(label='Fecha de fin', visible=False),
        ]


def main(page:ft.Page):
    page.title = "Prueba"
    
    def no_click(e):
        page.close(confirm_dialog)
        page.update()

    def presion(e):
        page.open(confirm_dialog)
        page.update()

    confirm_dialog = ft.AlertDialog(
        modal=True,
        title=ft.Text("Emergente",size=40,color="red"),
        content=ft.Text("Mensaje emergente",size=20),
        actions=[
            # ft.FilledTonalButton("Si", on_click=yes_click),
            ft.FilledButton("No", on_click=no_click),
        ],
        actions_alignment="end",
    )

    columna = ft.Column(
        controls=[
            DropdownFilterDates(),
            ft.ElevatedButton("Presioname",on_click=presion)
        ]
    )

    page.add(columna)


ft.app(target=main, assets_dir="assets")

Error message

Traceback (most recent call last):
  File "C:\Users\Usuario\AppData\Local\Programs\Python\Python311\Lib\concurrent\futures\thread.py", line 58, in run
    result = self.fn(*self.args, **self.kwargs)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Informacion\Equipos\Actualizar\flet23\Lib\site-packages\flet_core\page.py", line 941, in wrapper
    handler(*args)
  File "C:\Informacion\Equipos\Actualizar\AMP40ST\prueba.py", line 90, in abrir_fecha
    self.page.open(self.dt)
  File "C:\Informacion\Equipos\Actualizar\flet23\Lib\site-packages\flet_core\page.py", line 1426, in open
    control.update()
  File "C:\Informacion\Equipos\Actualizar\flet23\Lib\site-packages\flet_core\control.py", line 314, in update
    assert self.__page, "Control must be added to the page first."
AssertionError: Control must be added to the page first.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[tanmay-bhatgare]

There's some kind of bug where, did_mount function isn't appending self.dt to page. So instead use .add like:

class CalendarioInput(ft.Row):
    def did_mount(self):
        self.page.add(self.dt)

Hope this might work.

[ndonkoHenri]

After appending dt to the overlay, you need to update the page too:

    def did_mount(self):
        self.page.overlay.append(self.dt)
        self.page.update()