Forum› Xamarin.Forms
Data binding DatePicker and TimePicker in xaml
Poodle989
AUMember ✭✭
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.
0
Best Answer
-
DirkWilhelm
USMember ✭✭✭✭✭
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
6
Answers
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
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
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
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>