Trying to use date and time picker in ASP.NET 5 MVC

Question

I'm trying to add a date and time picker in my web app using ASP.NET MVC 5. My app is localized in 5 cultures: English, Spanish, French, Italian and Portuguese. In this case time is important, so I think that bootstrap-datepicker isn't enough (tell me if I'm wrong). I tried with bootstrap-datetimepicker becouse I see that uses locales and it is configurable for date and time. But I can't get this to work.

My operative system is Windows 10, in English, but with Spanish region configuration. Using Visual Studio 2017, I created a new project and installed and updated some nuget packages. If it helps, I'm using the following versions:

• Microsoft.AspNet.Mvc 5.2.7
• Bootstrap 3.3.7
• jQuery 3.4.1
• Moments.js 2.24.0
• Bootstrap.v3.Datetimepicker.CSS 4.17.45

I think that are all I need. This my simple model:

public class TimePeriod
{
    public DateTime Begin { get; set; }
    public DateTime End { get; set; }
}

This is the controller:

public class TimePeriodController : Controller
{
    // GET: TimePeriod
    public ActionResult Create()
    {
        TimePeriod model = new TimePeriod();
        model.Begin = new DateTime(2019, 11, 15, 9, 15, 00);
        model.End = new DateTime(2019, 11, 18, 17, 35, 00);
        return View(model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(TimePeriod model)
    {
        if (ModelState.IsValid)
        {
            ...
        }
        return View(model);
    }
}

I added begin and end dates only for testing purposes. Finally, this is the View:

@model DateTimePicker.Models.TimePeriod

<script type="text/javascript" src="~/Scripts/moment-with-locales.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>
<hr />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal col-md-12">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-row col-md-12">

            <div class="form-group col-md-6">
                @Html.LabelFor(model => model.Begin, htmlAttributes: new { @class = "control-label" })
                <div class='input-group date date-time-picker' id='datetimepicker1'>
                    @Html.TextBoxFor(model => model.Begin, htmlAttributes: new { @class = "form-control", @style = "max-width: none; width: 100%" })
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                @Html.ValidationMessageFor(model => model.Begin, "", new { @class = "text-danger" })
            </div>

            <div class="form-group col-md-6">
                @Html.LabelFor(model => model.End, htmlAttributes: new { @class = "control-label" })
                <div class='input-group date date-time-picker' id='datetimepicker2'>
                    @Html.TextBoxFor(model => model.End, htmlAttributes: new { @class = "form-control", @style = "max-width: none; width: 100%" })
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                @Html.ValidationMessageFor(model => model.End, "", new { @class = "text-danger" })
            </div>

        </div>

        <div class="form-row">

            <div class="form-group col-md-12">
                <div>
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

When I run the project and navigate to this view the dates are displayed like this (it is Spanish format, because of my system configuration?):

• Begin: 15/11/2019 9:15:00
• End: 18/11/2019 17:35:00

I have two problems:

• When I pick on calendar of begin date button, nothing happens, no calendar is shown like datetimepicker examples.
• If I click on create button without changing anything (with the same dates), I get validation error messages: "The field Begin must be a date" and "The field End must be a date". If I change dates' days to 11/11/2019 and 12/11/2019 there is no validation errors, so it seems that there is formatting problems... If I change dates to "11/13/2019 9:15:00" and "12/13/2019 17:35:00", validation errors are different: "The value '11/13/2019 9:15:00' is not valid for Begin" and "The value '12/13/2019 9:15:00' is not valid for End". Solved: see update below.

Do you know what is happening? Am I missing something? If there is another alternative to date and time picker, please tell me.

UPDATE

I solve date and time validation issue with this answer: MVC 4 date culture issue?