Data binding DatePicker and TimePicker in xaml

Poodle989 · March 2017

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.

DirkWilhelm · March 2017

IIRC for a timepicker the bindable property is "Time"

Edit: just saw that you already have that in your code. But the corresping property in your model should be TimeSpan for a timepicker, not DateTime

AlessandroCaliaro · March 2017

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

Poodle989 · 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

DirkWilhelm · March 2017

IIRC for a timepicker the bindable property is "Time"

Edit: just saw that you already have that in your code. But the corresping property in your model should be TimeSpan for a timepicker, not DateTime

Poodle989 · March 2017

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>

Xamarin

Quick Links

Data binding DatePicker and TimePicker in xaml

Best Answer

Answers