Binding three properties to DatePicker - xaml

Question

What would be best way to bind date in DatePicker to something like this:
"startedAt": {
"year": 2021,
"month": 9,
"day": 11
}
In json it looks like this, but these will be three separate ints in c# properties. My entry class that I use for my observable collection and Date class:
public class ListEntry : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public int? id { get; set; }
public Media media { get; set; }
public int? _score;
public int? score
{
get => _score;
set
{
if (value == _score)
return;
_score = value;
OnPropertyChanged();
}
}
public int _Progress;
public int progress
{
get => _Progress;
set
{
if (value == _Progress)
return;
_Progress = value;
OnPropertyChanged();
}
}
public string status { get; set; }
public Date startedAt { get; set; }
}
public class Date : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public int? _year;
public int? year
{
get => _year;
set
{
if (value == _year)
return;
_year = value;
OnPropertyChanged();
}
}
public int? _month;
public int? month
{
get => _month;
set
{
if (value == _month)
return;
_month = value;
OnPropertyChanged();
}
}
public int? _day;
public int? day
{
get => _day;
set
{
if (value == _day)
return;
_day = value;
OnPropertyChanged();
}
}
}
What I need to achieve is when I change date in DatePicker these three properties will change too.
I've tried something like this on my own
<DatePicker>
<DatePicker.Date>
<MultiBinding Mode="TwoWay" StringFormat="{}{0}/{1}/{2}">
<Binding Path="startedAt.month" TargetNullValue="2" />
<Binding Path="startedAt.day" TargetNullValue="3" />
<Binding Path="startedAt.year" TargetNullValue="2000" />
</MultiBinding>
</DatePicker.Date>
</DatePicker>
It picks up dates correctly, but changing one doesn't change properties and I'm getting errors. And it seems buggy, When i scroll down the page and go back to the top it will go back to the original binding instead of my date selected. It's not gonna work or I've done it wrong?
[0:] MultiBinding: '/20/2021' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '/20/1998' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '/16/2021' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '/1/2021' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '/20/2021' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '/23/2021' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '/20/2021' cannot be converted to type 'System.DateTime'
[0:] MultiBinding: '//' cannot be converted to type 'System.DateTime'
Perhaps I need converter of some sort and I can't really change classes, it might not deserialize i think?
EDIT:
foreach (var Group in AnimeGroupObservable)
{
foreach (var Entry in Group)
{
if (Entry.startedAt.year == null)
{
Entry.startedAt.Time = new DateTime(1970, 01, 01);
}
else
{
Entry.startedAt.Time = new DateTime((int)Entry.startedAt.year, (int)Entry.startedAt.month, (int)Entry.startedAt.day);
}
}
}
I added DateTime to my model
public DateTime? _Time;
public DateTime? Time
{
get => _Time;
set
{
if (value == _Time)
return;
_Time = value;
OnPropertyChanged();
}
}

Answer 1

You can try use the Completed event in Entry and DateSelected event in DatePicker to set the link between them. Change the date once the text in entry changed and change the text after date picked.
Here is my sample page and code:
xmal:
<StackLayout x:Name="stk"s/>
<Entry x:Name="E_Year" Completed="Entry Completed"/>
<Entry x:Name="E_ Month" Completed="Entry Completed"/>
<Entry x:Name="E_Day" Completed="Entry Completed"/>
<DatePicker x:Name"mydtp" DateSelected="0nDateSelected"/>
</StackLayout>
codebehind:
private void Entry _Completed(object sender, EventArgs e)
{
int _year = Convert. ToInt16(E_Year.Text);
int _month = Convert. ToInt16(E_Month.Text);
int _day = Convert.ToInt16(E_Day.Text);
DateTime _dateTime = new DateTime(_year,_month,_day);
mydtp.Date =_dateTime;
}
private void OnDateSelected (object sender, EventArgs e)
{
DateTime dateTime = mydtp.Date;
E_Year.Text = dateTime.Year.ToString();
E_Month.Text = dateTime Month.ToString();
E_Day.Text = dateTime.Day.ToString();
}