Forum Xamarin.Forms

Data binding DatePicker and TimePicker in xaml

Poodle989Poodle989 AUMember ✭✭

Hey all,

I am new to Xamarin and I have been playing around with data binding. I have a script "Items.cs" with the code:

    DateTime startDate = DateTime.Now;
    public DateTime StartDate
    {
        get { return startDate; }
        set { SetProperty(ref startDate, value); }
    }

    DateTime startTime = DateTime.Now;
    public DateTime StartTime
    {
        get { return startTime; }
        set { SetProperty(ref startTime, value); }
    }

    DateTime endTime = DateTime.Now;
    public DateTime EndTime
    {
        get { return endTime; }
        set { SetProperty(ref endTime, value); }
    }

and a page "ItemPage.xaml" with the code:

        <Label Text="Start Date" FontSize="Small" />
            <DatePicker x:Name="StartDatePicker" Format="dd-MM-YYYY" MinimumDate="{Binding Item.StartDate}" />
            <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Label Text="Start Time" Grid.Row="0" Grid.Column="0"/>
                <TimePicker x:Name="StartTime" Time="{Binding Item.StartTime}" Grid.Row="1" Grid.Column="0"/>

            <Label Text="End Time" Grid.Row="0" Grid.Column="1"/>
                <TimePicker x:Name="EndTime" Time="{Binding Item.EndTime}" Grid.Row="1" Grid.Column="1"/>
            </Grid>

The input seems to be working correctly but when I look at the output the values won't update to the selected values.
All three values seem to remain at the default DateTime.Now.

Best Answer

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I don't know if TimePicker and DatePicker are "bindable".
    If the answer is "Yes", I think you can try to set the BindingMode.TwoWay

  • Poodle989Poodle989 AUMember ✭✭
    edited March 2017

    I just managed to find the "Date" property (which is bindable according to the xamarin docs) for DatePicker and that seems to be kind of working now

    However I have not been able to find anything to do the similar sort of thing for TimePicker

  • Poodle989Poodle989 AUMember ✭✭

    Thanks heaps to both of you. I did some more research on how to be able to display the data using StringFormat.

    Just incase anyone else is looking

    ItemDetailPage.xaml:

        <Label Text="{Binding Item.StartDate, StringFormat='{}{0:dd-MM-yyyy}'}" FontSize="Medium" />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Label Text="{Binding Item.StartTime, StringFormat='{}{0:hh\\:mm}'}" Grid.Row="0" Grid.Column="0"/>
            <Label Text="{Binding Item.EndTime, StringFormat='{}{0:hh\\:mm}'}" Grid.Row="0" Grid.Column="1"/>
        </Grid>
    

    NewItemPage.xaml

                <DatePicker x:Name="StartDatePicker" Format="dd/MM/yyyy" Date="{Binding Item.StartDate}" MinimumDate="{Binding Item.StartDate}" />
                <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
    
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
    
                <Label Text="Start Time" Grid.Row="0" Grid.Column="0"/>
                    <TimePicker x:Name="StartTime" Time="{Binding Item.StartTime}" Grid.Row="1" Grid.Column="0"/>
    
                <Label Text="End Time" Grid.Row="0" Grid.Column="1"/>
                    <TimePicker x:Name="EndTime" Time="{Binding Item.EndTime}" Grid.Row="1" Grid.Column="1"/>
                </Grid>
    
Sign In or Register to comment.