how to print the date collected from datepicker in an editor in MAUI

Question

how can I print the date collected from date picker in an editor or a label in MAUI? I have tried to print the date but it doesn't show anything.

                <DatePicker  x:Name="mDatePicker" Style="{StaticResource dateStyle}" MinimumDate="01/01/2020" MaximumDate="12/31/2022" Date="01/01/2022" />

                <Label Style="{StaticResource label1Style}" Text="Location" HorizontalOptions="Start" VerticalOptions="Start" />



                <Picker x:Name="picker" Title="Select a Company" Style="{StaticResource comboStyle}">
                    <Picker.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>Baboon</x:String>
                            <x:String>Capuchin Monkey</x:String>
                            <x:String>Blue Monkey</x:String>
                            <x:String>Squirrel Monkey</x:String>
                            <x:String>Golden Lion Tamarin</x:String>
                            <x:String>Howler Monkey</x:String>
                            <x:String>Japanese Macaque</x:String>
                        </x:Array>
                    </Picker.ItemsSource>
                </Picker>

                <Button HeightRequest="60" WidthRequest="300" Grid.Row="3" x:Name="inbtn" Text="In" Style="{StaticResource inButtonStyle}" SemanticProperties.Hint="navigate when clicked" Clicked="OnInClicked" HorizontalOptions="Center" />

                <Button HeightRequest="60" WidthRequest="300" Grid.Row="3" x:Name="outbtn" Text="Out" Style="{StaticResource outButtonStyle}" SemanticProperties.Hint="navigate when clicked" Clicked="OnOutClicked" HorizontalOptions="Center" />

            </VerticalStackLayout>

Answer 1

You can try to set Reference to the DatePicker and set the path to Date.

Please refer to the following code:

        <DatePicker x:Name="mDatePicker"   MinimumDate="01/01/2020" MaximumDate="12/31/2022" Date="01/01/2022" DateSelected="DatePicker_DateSelected" /> 

        <Entry Placeholder="text" Text="{Binding Source={x:Reference mDatePicker}, Path=Date }"   />

If you use TimePicker, you can set the Path to Time

    <TimePicker x:Name="timePicker" />
    <Label Text="{Binding Source={x:Reference timePicker},
                          Path=Time,
                          StringFormat='The TimeSpan is {0:c}'}" />

Update:

From the new thread you posted, I found that you want to bind the variable time1 defined in your DesktopStartupPage.xaml.cs to an Entry,just as follows:

 public DateTime time1 { get; set; }

<Entry Placeholder="text" Text="{Binding Source={Binding time1},
                              Path=Time,
                              StringFormat='The TimeSpan is {0}'}" Style="{StaticResource tableContStyle}" Grid.Row="1" Grid.Column="0"

/>

Then we need to bind the variable directly. And if you want to update the UI once changing the value of the variable, you can implement interface INotifyPropertyChanged for your page.

Please refer to the following code:

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiScrollApp1212.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="10"
            VerticalOptions="Center">


            <DatePicker x:Name="mDatePicker"   MinimumDate="01/01/2020" MaximumDate="12/31/2022" Date="01/01/2022" DateSelected="DatePicker_DateSelected" />

            <Entry Placeholder="text" Text="{Binding Source={x:Reference mDatePicker}, Path=Date, StringFormat='The TimeSpan is {0:c}' }"   />


            <Button HeightRequest="60" WidthRequest="300"  x:Name="inbtn" Text="In"   Clicked="OnInClicked" HorizontalOptions="Center" />


            <!--<Entry Placeholder="text" Text="{Binding Source={Binding Time1},  
                              Path=Date,
                              StringFormat='The TimeSpan is {0}'}"  />-->

            <Entry Placeholder="text" Text="{Binding Time1, StringFormat='The TimeSpan is {0}'}"  />



        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs

public partial class MainPage : ContentPage, INotifyPropertyChanged 
{
    //public DateTime time1 { get; set; }

    DateTime _time1;
    public DateTime Time1
    {
        get => _time1;
        set => SetProperty(ref _time1, value);
    }

    public MainPage()
      {
            InitializeComponent();

        Time1 = DateTime.Now;

        this.BindingContext = this;
    }



    private void DatePicker_DateSelected(object sender, DateChangedEventArgs e)
    {
        Time1 = mDatePicker.Date;
    }
    private void OnInClicked(object sender, EventArgs e)
    {
        //Time1 = DateTime.Now;
        Console.WriteLine(Time1);

       // GetCachedLocation();
    }



    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}