I'm using dotnet core v4 and Bootstrap 5. The datetime picker I'm using is Tempus Dominus which I'm including in my _layout like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
My model includes the field
public DateTime StoveInstalled { get; set; }
The form in my view includes
@Html.TextBoxFor(modelItem => Model.StoveInstalled, new { @readonly = "readonly", @id = "txtStoveInstalledDate" })
With the following in a script tag for the datetime picker
<script type="text/javascript">
$(function () {
$(txtStoveInstalledDate).datepicker({
changeMonth: true,
changeYear: true,
format: "dd/mm/yyyy",
language: "tr"
});
});
</script>
The textbox is getting populated where there is a value, so the model is working and razor is populating the field.
Returning to a controller looking like this
[HttpPost]
public ActionResult Edit(CustomerViewModel customer)
{
return View();
}
However the date return looking like this, whether edited or not
The datetime picker works and updates the TextBoxFor value. I can get the data back by not using a form and just submitting everything on a button press with AJAX, but it's a big form and that's frankly ugly, plus I would like to understand what the issue is.
One obvious looking thing is the readonly attribute, I've added that as I only want the date picker to be able to edit the textbox. This works well. If I remove the readonly, the value returned is still the default minimum datetime value.
Somebody stated there is no dotnet core V4, fair enough, I took that from the following reference, I just went with one of the standard project starters in visual studio.
I have no idea how to tell what version I'm actually using, but in the project properties is says target Framework .Net Framework 4.8, so maybe this is not core. I think the issue is still the same one though?
I add the rest of my includes in here, in case it's something odd with the order I'm adding them.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<title>Let's sweep!</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js" integrity="sha512-DedNBWPF0hLGUPNbCYfj8qjlEnNE92Fqn7xd3Sscfu7ipy7Zu33unHdugqRD3c4Vj7/yLv+slqZhMls/4Oc7Zg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
Thank you in advance, hopefully!
Jim