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

Time:12-14

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>

CodePudding user response:

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;
}

CodePudding user response:

In general, we recommend using MVVM for your functionality.

You can add the variable time1 in the ViewModel of this page. And if you want to update the UI once changing the value of the variable, you can implement interface INotifyPropertyChanged for your page.

I have achieved this function, you can refer to the following code:

MyViewModel.cs

public class MyViewModel: INotifyPropertyChanged 
    {
        DateTime _time1;

        // We usually define variable with capital letters as bind's variables. 
        public DateTime Time1  
        {
            get => _time1;
            set => SetProperty(ref _time1, value);
        }

      // add `BtnInCommand` for Button(inbtn)  here   
        public ICommand BtnInCommand => new Command(showDate);

        private void showDate(object obj)
        {

            Time1 = DateTime.Now.AddDays(10);
        }

        public MyViewModel() {

            Time1 = DateTime.Now;
        }


        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;
    }

DesktopStartupPage.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.DesktopStartupPage"
             Title="DesktopStartupPage">
    <VerticalStackLayout>


        <Button HeightRequest="60" WidthRequest="300"  x:Name="inbtn" Text="In"   Command="{Binding BtnInCommand}" HorizontalOptions="Center" />

       <!--   bind variable Time1  here-->
        <Entry Placeholder="text" Text="{Binding Time1, StringFormat='The TimeSpan is {0}'}"  />
    </VerticalStackLayout>
</ContentPage>

DesktopStartupPage.xaml.cs

public partial class DesktopStartupPage : ContentPage 
{
      public DesktopStartupPage()
      {
            InitializeComponent();

             // set the BindingContext  for this page    
            this.BindingContext =  new MyViewModel(); 
      }
}
  • Related