6

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:

enter image description here

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.

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.

4
  • you can attach a TapGestureRecognizer to any element, including the entire Grid or Border Commented Jul 18, 2023 at 12:21
  • @Jason Yes, but then what I should do? With DatePicker.Focus() nothing happens Commented Jul 18, 2023 at 12:31
  • 1
    google.com/… Commented Jul 18, 2023 at 12:38
  • thanks @Jason, I solved in another way Commented Jul 18, 2023 at 14:05

2 Answers 2

4

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.

Sign up to request clarification or add additional context in comments.

Comments

2

A correction on Yoji's answer. There is no bug to be fixed. The reason why DatePicker.Focus() no longer opens the picker, is because that was a bug that has been fixed.

Pertinent issues

This comment from MAUI maintainer @mattleibow explains the problem with letting Focus(), both focus the input, and also visually open the date-picker:

I think for a11y reasons, we cannot/should not open the picker. If you are navigating the screen using TalkBack, then suddenly it goes from a form to a date picker and then you are lost.

This must be a separate API where the dev can decide when/if to show the picker.

In summary:

We're not waiting for a bug to be fixed but for a new API to be added. It doesn't have much priority, because it's not broken. It's lacking desirable functionality. Discussion and PRs towards creating such an API are welcome.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.