How to Open and Close SfDatePicker correctly from SfTextInputLayout

[Michael Yui Fai Poon]

Hi, I have below code, that has an Entry, which on focus, it sets the entry to IsReadOnly and sets the SfDatePicker.IsOpen = true.

This makes entry unfocusable.

So what works for Android, is you can set IsReadOnly = false when the entry is Unfocused, so it can be focused again.

However, on Xamarin.iOS this does not work.

When you sent an entry to IsReadOnly, it immediately loses focus.

My question is, how do I keep the SfTextInputLayout look as if it had a Xamarin.Forms.DatePicker, but opens SfDatePicker instead on both platforms, Android and iOS.

                <inputLayout:SfTextInputLayout Hint="Date of birth"  >
                    <Entry x:Name="DOBEntry" Text="{Binding ContactCreate.date_of_birth, StringFormat='{0:dd/MM/yyyy}', Mode=OneWay}" TextChanged="entry_TextChanged" Focused="DOBEntry_Focused" Unfocused="DOBEntry_Unfocused" />
                </inputLayout:SfTextInputLayout>
              

<sfDatePicker:SfDatePicker x:Name="DOBPicker" Focused="DOBEntry_Focused" DateSelected="DOBPicker_DateSelected"  HeaderText="Date of Birth" PickerMode="Dialog" OkCommand="{Binding DatePickerOKCommand}" ShowFooter="True" PickerWidth="350" PickerHeight="350"  />

[Michael Yui Fai Poon]

I think SfDatePicker Focused and more importantly Unfocused events don't work. I've tested on iOS 13.6.

Then I could just set the Entry.IsReadOnly = false on Unfocused.

[Sakthivel Palaniyappan]

Hi Michael,

Greetings from Syncfusion.

We have analyzed your query and you can full fill this requirement by using TapGesture Recognizer of the layout as like below code snippet.

XAML:

 

  <inputLayout:SfTextInputLayout  Hint="Time" ContainerType="Outlined"> 

                <Grid VerticalOptions="Center" HeightRequest="50"> 

                    <Label VerticalOptions="Center"  VerticalTextAlignment="Center" x:Name="entry"/> 

                    <Grid.GestureRecognizers> 

                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> 

                    </Grid.GestureRecognizers> 

                </Grid> 

            </inputLayout:SfTextInputLayout> 

            

        <timePicker:SfDatePicker x:Name="datePicker" IsOpen="False"  DateSelected="DatePicker_DateSelected" 

                                     PickerMode="Dialog" HorizontalOptions="Center" VerticalOptions="Center" 

                                     PickerHeight="300" 

                                     PickerWidth="300"/> 

C#:

 

  private void TapGestureRecognizer_Tapped(object sender, EventArgs e) 

        { 

            datePicker.IsOpen = true; 

        } 

We have created sample based on this , lease find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker-468484022.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P. 

[Michael Yui Fai Poon]

Hi Michael,

Greetings from Syncfusion.

We have analyzed your query and you can full fill this requirement by using TapGesture Recognizer of the layout as like below code snippet.

XAML:

 

  <inputLayout:SfTextInputLayout  Hint="Time" ContainerType="Outlined"> 

                <Grid VerticalOptions="Center" HeightRequest="50"> 

                    <Label VerticalOptions="Center"  VerticalTextAlignment="Center" x:Name="entry"/> 

                    <Grid.GestureRecognizers> 

                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> 

                    </Grid.GestureRecognizers> 

                </Grid> 

            </inputLayout:SfTextInputLayout> 

            

        <timePicker:SfDatePicker x:Name="datePicker" IsOpen="False"  DateSelected="DatePicker_DateSelected" 

                                     PickerMode="Dialog" HorizontalOptions="Center" VerticalOptions="Center" 

                                     PickerHeight="300" 

                                     PickerWidth="300"/> 

C#:

 

  private void TapGestureRecognizer_Tapped(object sender, EventArgs e) 

        { 

            datePicker.IsOpen = true; 

        } 

We have created sample based on this , lease find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker-468484022.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P. 

Thank you Sakthive.

This is the outcome on Date of birth section:

It's not a viable solution, as Hint's need to look correctly when there is no data.

The label looks unnatural even with a matching font, and I suspect it would look even more different on iOS due to height inconsistencies.

Also, would prefer to keep entry if possible as already handling entry textchange events.

Maybe there's an option to create a custom Xamarin.Forms DatePicker that would use syncfusions SfDatePicker as a view, and keep all Xamarin.Forms DatePicker functionality?

How do people normaly use SfDatePicker? Out of a button?

[Rabhia Beham Kathar Mideenar]

Hi Michael,

Thanks for the response.

We would like to let you know that normally the users use SfDatepicker bound to either Xamarin.Forms Entry or Label. The initial label displaying empty could be changed by setting a default date value to have a good looking UI.

Please let us know if you have any other queries.

Regards,
Rabhia Beham.

[Jassim Rahma]

This is not working when you set the Entry to readOnly and user needs to know wher exactly they should Tap.

Look at this sample:

<SyncfusionInputLayout:SfTextInputLayout x:Name="InputLayoutBirthday" VerticalOptions="Center" Hint="Birthday" LeadingViewPosition="Inside"> 

    <SyncfusionInputLayout:SfTextInputLayout.GestureRecognizers>

        <TapGestureRecognizer Tapped="TapGestureRecognizerShowBirthday_Tapped"/> 

    </SyncfusionInputLayout:SfTextInputLayout.GestureRecognizers> 

    <Entry x:Name="EntryBirthday" TextColor="Black" IsReadOnly="True" />

    <SyncfusionInputLayout:SfTextInputLayout.LeadingView>

        <Label Text="&#x1F5D3;" />

    </SyncfusionInputLayout:SfTextInputLayout.LeadingView>

</SyncfusionInputLayout:SfTextInputLayout> 

<SyncfusionDate:SfDatePicker x:Name="DatePickerBirthday" ShowFooter="True" PickerMode="Dialog" HeaderText="Birthday" ShowHeader="True" DateSelected="DatePickerBirthday_DateSelected" PickerWidth="300" PickerHeight="300" />

Kindly help...

Thanks,

Jassim

[Suganya Sethuraman]

Hi Jassim,

As you have mentioned with IsReadOnly property as True, we can understand that your requirement is not related with editing the entry value. With this use case, in order to invoke the Tap Command of SfTextInputLayout, please enable the InputTransparent as shown in below.

Code Snippet: 

<inputLayout:SfTextInputLayout x:Name="InputLayoutBirthday" 

                               VerticalOptions="Center" 

                               Hint="Birthday" 

                               LeadingViewPosition="Inside"> 

    <Entry VerticalOptions="Center" 

           InputTransparent="True" 

           IsReadOnly="True" 

           TextColor="Black" 

           x:Name="EntryBirthday"/> 

    <inputLayout:SfTextInputLayout.GestureRecognizers> 

        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> 

    </inputLayout:SfTextInputLayout.GestureRecognizers> 

    <inputLayout:SfTextInputLayout.LeadingView> 

        <Label Text="&#x1F5D3;" /> 

    </inputLayout:SfTextInputLayout.LeadingView> 

</inputLayout:SfTextInputLayout> 

Please have the sample,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker607184901  

Regards,
Suganya Sethuraman.