Responsive Date Picker Component

The out-the-box date pickers, including the modern control, aren’t especially user friendly, nor flexible to developers, so it’s a prime input type to be rebuilt as a custom canvas component.

This date picker is designed to function well in both desktop and mobile canvas apps. Practically all properties are dynamic, reflecting canvas size, orientation, and colour palette, as well as permitting single, multiple and range inputs.

The core trick the component performs is displaying a calendar of dates without the app having to build a collection first. It does this using the Sequence() function to build a table of integers, before using date functions to add the columns needed to display a calendar. All it needs is a Year and Month to be passed as variables.

Let’s see the code first and then we can break it down to a few key chunks:

With(
    {
        Dates:
        AddColumns(
            Sequence(
                DateDiff(
                    Date(varDatePickerYear, varDatePickerMonth, 1),
                    EOMonth(Date(varDatePickerYear, varDatePickerMonth, 1), 0)
                )
            ),
            Index, Value + 1, // adds one so datediff is inclusive of both sides of range
            Date, DateAdd(Date(varDatePickerYear, varDatePickerMonth, 1), Value),
            Type, "Current"
        )
    },
    With(
        {
            Padded:
            Table(
                AddColumns(
                    Sequence(
                        If(
                            Text(Date(varDatePickerYear, varDatePickerMonth, 1), "ddd") = "Sun",
                            8,
                            7 + Weekday(Date(varDatePickerYear, varDatePickerMonth, 1), StartOfWeek.Sunday)
                        )
                    ),
                    Index,
                    Value - 
                    If(
                        Text(Date(varDatePickerYear, varDatePickerMonth, 1), "ddd") = "Sun",
                        8,
                        7 + Weekday(Date(varDatePickerYear, varDatePickerMonth, 1), StartOfWeek.Sunday)
                    ) + 1,
                    Date, DateAdd(Date(varDatePickerYear, varDatePickerMonth, 1), 
                    Value - 
                        If(
                            Text(Date(varDatePickerYear, varDatePickerMonth, 1), "ddd") = "Sun",
                            8,
                            7 + Weekday(Date(varDatePickerYear, varDatePickerMonth, 1), StartOfWeek.Sunday)
                        )
                    ),
                    Type, "Previous"
                ),
                Dates
            )
        },
        With(
            {
                Final:
                Table(
                    Padded,
                    AddColumns(
                        Sequence(
                            49 - CountRows(Padded)
                        ),
                        Index, Value,
                        Date, DateAdd(EOMonth(Date(varDatePickerYear, varDatePickerMonth, 1), 0), Value),
                        Type, "Next"
                    )
                )
            },
            LastN(
                FirstN(
                    Final,
                    7 * ThisItem.Value
                ),
                7
            )
        )
    )
)

Content here…