Bootstrap Datetimepicker UK date format posts as US format - asp.net-mvc

Question

I am using the Bootstrap DateTime picker and formatting it to a UK format in a .NET 5 MVC project using a Razor page front end.
The input is as below
<input type="text" asp-for="WeddingDate" class="form-control" onblur="WizardSummary('WeddingDate','SummaryWeddingDate')" required />
And the javascript initialing it
$('.datetimepicker').datetimepicker({
icons: {
time: "fas fa-clock",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
},
format: 'DD/MM/YYYY HH:mm:ss'
});
Fairly simple stuff. It all works absolute fine in the front end, it fires, formats the date etc... no issues at all.
However, when I POST the data to the controller for a date with a day > 12 (example todays date - 24/09/2021), it comes through as 0001/01/01 00:00:00 and I think this is because the model expects a standard DateTime, which would be US format and it translates it to this value. I can see in the chrome developer tools it is posting a value in UK format as expected.
Extract of model below
public class WeddingWizardViewModel
{
public DateTime WeddingDate { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
What have I gotten wrong? How can I get my backend to recognise I am posting a valid format?
Update Here is the WizardSummary function, which is purely to copy the content of the input box into a text label that I display on a sumarry screen.
function WizardSummary(input, output) {
var inputvalue = document.getElementById(input).value;
document.getElementById(output).innerHTML = inputvalue;
}
Controller method on submission of form*
[HttpPost]
public async Task<IActionResult> Wizard(WeddingWizardViewModel vm)
{
var user = _userManager.GetUserAsync(User).Result;
vm.TopBar = new TopBarViewModel();
vm.TopBar.PageTitle = "Wedding Wizard";
vm.TopBar.Breadcrumbs = new List<Breadcrumb>();
var level1 = new Breadcrumb
{
Level = 1,
Name = "Weddings",
Controller = "Weddings",
Action = "Index"
};
vm.TopBar.Breadcrumbs.Add(level1);
var level2 = new Breadcrumb
{
Level = 2,
Name = "Wizard",
Controller = "Weddings",
Action = "Wizard"
};
vm.TopBar.Breadcrumbs.Add(level2);
this.ViewData["TopBarViewModel"] = vm.TopBar;
var templatesegments = _context.TemplateSegments.Include(i => i.Shots.OrderBy(i => i.Id)).Where(i => i.TemplateId == vm.TemplateId).ToList() ;
List<Segment> segments = new List<Segment>();
foreach(var templatesegment in templatesegments)
{
Segment newseg = new Segment();
newseg.CompanyId = user.CompanyId;
newseg.Name = templatesegment.Name;
newseg.Created = DateTime.UtcNow;
newseg.Modified = DateTime.UtcNow;
newseg.StartTime = new DateTime(vm.WeddingDate.Year, vm.WeddingDate.Month, vm.WeddingDate.Day, vm.WeddingDate.Hour, vm.WeddingDate.Minute, vm.WeddingDate.Second);
newseg.ReminderInMinutes = 15;
newseg.ClientVisible = templatesegment.ClientVisible;
newseg.Shots = new List<Shot>();
foreach (var templateshot in templatesegment.Shots)
{
Shot newshot = new Shot();
newshot.CompanyId = user.CompanyId;
newshot.Created = DateTime.UtcNow;
newshot.Modified = DateTime.UtcNow;
newshot.Name = templateshot.Name;
newshot.ClientVisible = templateshot.ClientVisible;
newshot.Sequence = templateshot.Sequence;
newseg.Shots.Add(newshot);
}
segments.Add(newseg);
}
Wedding wedding = new Wedding();
wedding.Client1EMail = vm.Client1EMail;
wedding.Client1FirstName = vm.Client1FirstName;
wedding.Client1LastName = vm.Client1LastName;
wedding.Client1FullMobileNumber = vm.Client1FullMobileNumber;
wedding.Client1Role = vm.Client1Role;
wedding.Client2EMail = vm.Client2EMail;
wedding.Client2FirstName = vm.Client2FirstName;
wedding.Client2FullMobileNumber = vm.Client2FullMobileNumber;
wedding.Client2LastName = vm.Client2LastName;
wedding.Client2Role = vm.Client2Role;
wedding.CompanyId = user.CompanyId;
wedding.Description = vm.Description;
wedding.Name = vm.Name;
wedding.Segments = segments;
wedding.WeddingDate = vm.WeddingDate;
_context.Add(wedding);
_context.SaveChanges();
//Image Upload
if (vm.WeddingAvatar != null)
{
var upload = await FileUpload.Upload(vm.WeddingAvatar, _env, user, "weddingavatars", wedding.Id.ToString());
if (upload.Success == true)
{
wedding.WeddingAvatarFileName = upload.FileName;
}
else
{
return BadRequest("Error uploading file");
}
}
_context.Update(wedding);
_context.SaveChanges();
TempData["message"] = "Your wedding has been created and you can now start adding segments and shots to it";
return RedirectToAction("Edit", new { id = wedding.Id });
}

Answer 1

Please, try to set the locale property of your date time picker; in the code bellow sounds an example of UK locale:
$('.datetimepicker').datetimepicker({
icons: {
time: "fas fa-clock",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove',
locale: 'uk'
},
format: 'DD/MM/YYYY HH:mm:ss'
});
And in Back-End, at Controller ActionResult method, add in first line this code bellow:
var cultureInfo = CultureInfo.GetCultureInfo("en-uk");
Thread.CurrentThread.CurrentCulture = cultureInfo;
Thread.CurrentThread.CurrentUICulture = cultureInfo;