Custom DatePicker in .NET MAUI

Question

I'm trying to build a custom datePicker in .NET MAUI but I have some issue to solve. First of all this is how the DatePicker should be:

The main problem is that I would like clicking above the label "Pick a date" to open the calendar for date selection. So, in other words, I would like to trigger a fake click of the datePicker control by clicking on the label. This is the xaml code of my custom control:

<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myProject.Custom_controls.CustomDatePicker"
             RowDefinitions="50"
             x:Name="this" >

    <!-- External rounded border -->
    <Border x:Name="borderDatePickerCustom" Grid.Row="0" Padding="8" StrokeShape="RoundRectangle 10,10,10,10" Stroke="{Binding Source = {x:Reference this}, Path = BorderColor}" 
            StrokeThickness="1">
        <Grid>

            <!-- DatePicker control -->
            <DatePicker x:Name="DatePickerCustom"
               Grid.Row="0"
               Margin="40,0,0,0"
               Format="{}{MM/dd/yyyy}"
               IsVisible="true"
               DateSelected="_OnDateSelected"
               Unfocused="_DatePickerUnfocused"/>

            <!-- Image control used to insert an icon left to the label -->
            <Image x:Name="DatePickerIcon"
            Grid.Row="0"
            VerticalOptions="Center"
            HorizontalOptions="Start"
            Margin="4"
            Source="calendar.png"
            IsVisible="true" />

        </Grid>
    </Border>

    <!-- Label used like placeholder -->
    <Label x:Name="lblPlaceholder"
           IsVisible="true"
           Grid.Row="0"
           FontSize="15"
           InputTransparent="true"
           Margin="50,0,10,0"
           Text="{Binding Source={x:Reference this}, Path=Text}"
           HorizontalOptions="StartAndExpand"
           VerticalOptions="CenterAndExpand"
           TextColor="{Binding Source={x:Reference this}, Path=PlaceholderTextColor}"
           BackgroundColor="{Binding Source={x:Reference this}, Path=PlaceholderBackgroundColor}"
           IsEnabled="{Binding Source={x:Reference this}, Path=IsEnabledCustom}">
    </Label>

    <!-- ImageButton used to erase datePicker content -->
    <ImageButton x:Name="EraseBtn"
                 Grid.Row="0"
                 VerticalOptions="CenterAndExpand"
                 HorizontalOptions="End"
                 Source="cross.png"
                 Margin="18"
                 IsVisible="false"
                 Clicked="_EraseDatePickerBtnClick" />
</Grid>

Does anyone know a method that could help me? This app should work mainly on Windows platform.

The second issue is that i try to remove the calendar glyph from the datePicker control but without success

I tried in code behind to set inputTransparent = true to the Label but it didn't work. I also tried to trigger the datePicker.Focus() but also this didn't work. I have no other ideas, I see that on Android exist PerformClick() but i'm on Windows platform.

you can attach a `TapGestureRecognizer` to any element, including the entire `Grid` or `Border` — Jason, Jul 18 '23 at 12:21
@Jason Yes, but then what I should do? With `DatePicker.Focus()` nothing happens — Yoji, Jul 18 '23 at 12:31
https://www.google.com/search?q=%5Bmaui%5D+datepicker+focus+site%253Astackoverflow.com — Jason, Jul 18 '23 at 12:38
You can [accept your own answer](https://stackoverflow.blog/2009/01/06/accept-your-own-answers/) if it's helpful to others facing the same problem. — Jianwei Sun - MSFT, Jul 19 '23 at 01:29

score 0 · Accepted Answer · answered Jul 18 '23 at 14:03

0

To solve my problem without using the Focus() method, I simply set the Opacity = 0 for the DatePicker and the label ZIndex = -1 so that clicking on the label opens the flyout of the DatePicker. Waiting for the bug to be fixed.

answered Jul 18 '23 at 14:03

Yoji

41
7

Custom DatePicker in .NET MAUI

1 Answers1