MudBlazor Mudtable RowEditing Datetime - blazor-server-side

Question

I use from mudblazor the MudTable. It displays the data perfectly.
I like to edit it inline. In my model there is a DateTime field I want to edit and set.
After some juggling around, I see a datepicker, a timepicker, but I can't seem to figure out how to edit this inline as a legal date and time format and combine them back to the data-sourcefield.
Can you help me with some samplecode to achieve that.
Thank you.

Answer 1

Inside the <MudTd> tag, add the MudDatePicker and MudTimePicker:
<MudTd>
<MudDatePicker
Date="#context.DateTime.Date"
DateChanged="#(d => this.DateChanged(d.Value, context))"/>
<MudTimePicker
Time="#context.DateTime.TimeOfDay"
TimeChanged="#(t => this.TimeChanged(t.Value, context))"/>
</MudTd>
and implement the DateChanged(...) and TimeChanged(...) in your own code.
A demo:
#page "/"
<MudTable Items="#this.elements">
<ToolBarContent>
<MudText Typo="Typo.h6">Elements</MudText>
</ToolBarContent>
<HeaderContent>
<MudTh>Id</MudTh>
<MudTh>Name</MudTh>
<MudTh>DateTime</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd>#context.Id</MudTd>
<MudTd>#context.Name</MudTd>
<MudTd>
<MudDatePicker Date="#context.DateTime.Date" DateChanged="#(d => this.DateChanged(d.Value, context))"/>
<MudTimePicker Time="#context.DateTime.TimeOfDay" TimeChanged="#(t => this.TimeChanged(t.Value, context))"/>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager />
</PagerContent>
</MudTable>
<MudText Color="Color.Primary">#this.log</MudText>
#code {
private string log = string.Empty;
private List<Element> elements = new();
protected override void OnInitialized()
{
this.elements = new List<Element>
{
new() { Id = 1, Name = "First", DateTime = DateTime.UtcNow - TimeSpan.FromDays(1) },
new() { Id = 2, Name = "Second", DateTime = DateTime.UtcNow - TimeSpan.FromDays(2) },
new() { Id = 3, Name = "Third", DateTime = DateTime.UtcNow - TimeSpan.FromDays(3) },
};
}
public class Element
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime DateTime { get; set; }
}
private void DateChanged(DateTime date, Element element)
{
this.SetDateTime(date, element.DateTime.TimeOfDay, element);
}
private void TimeChanged(TimeSpan time, Element element)
{
this.SetDateTime(element.DateTime.Date, time, element);
}
private void SetDateTime(DateTime date, TimeSpan time, Element element)
{
element.DateTime = new DateTime(date.Year, date.Month, date.Day, time.Hours, time.Minutes, time.Seconds);
this.log = $"New datetime for element with Id {element.Id}: {element.DateTime}";
}
}
Try it online: https://try.mudblazor.com/snippet/caGROlvFgrXENaMD