Попытка использования выбора даты и времени в ASP.NET 5 MVC - PullRequest
Новая
       48

Попытка использования выбора даты и времени в ASP.NET 5 MVC

0 голосов
/ 07 ноября 2019

Я пытаюсь добавить указатель даты и времени в свое веб-приложение с помощью ASP.NET MVC 5. Мое приложение локализовано в 5 культурах: английском, испанском, французском, итальянском и португальском. В этом случае time важно, так что я думаю, что bootstrap-datepicker недостаточно (скажите мне, если я ошибаюсь). Я попытался с bootstrap-datetimepicker, потому что я вижу, что использует локали, и это настраивается для даты и времени. Но я не могу заставить это работать.

Моя операционная система - Windows 10, на английском языке, но с испанской конфигурацией региона. Используя Visual Studio 2017, я создал новый проект, установил и обновил некоторые пакеты nuget. Если это помогает, я использую следующие версии:

  • 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

Я думаю, это все, что мне нужно. Это моя простая модель: 

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

Это контроллер: 

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);
    }
}

Я добавил даты начала и окончания только для целей тестирования. Наконец, это представление: 

@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")
}

Когда я запускаю проект и перехожу к этому представлению, даты отображаются примерно так (это испанский формат, из-за конфигурации моей системы?):

  • Начало: 15/11/2019 9: 15: 00
  • Конец: 18/11/2019 17: 35: 00

У меня две проблемы:

  • Когда я выбираю кнопку календаря даты начала, ничего не происходит, календарь не отображается, как примеры datetimepicker .
  • Если я нажимаю кнопку «Создать», ничего не меняя(с теми же датами), я получаю сообщения об ошибках проверки: «Поле Begin должно быть датой» и «Поле End должно быть датой». Если я изменяю даты дат на 11/11/2019 и 12/11/2019, ошибок проверки нет, поэтому кажется, что есть проблемы с форматированием ... Если я изменяю даты на "13.11.2009 9:15:00 "и" 13.12.2009 17:35:00 ", ошибки проверки различны:" Значение '11 / 13/2019 9:15:00 'недопустимо для начала "и" Значение '12 / 13/ 2019 9:15:00 «Недействительно для End». Решено: см. Обновление ниже.

Знаете ли вы, что происходит? Я что-то пропустил? Если есть другой вариант выбора даты и времени, пожалуйста, сообщите мне.

ОБНОВЛЕНИЕ

Я решаю вопрос проверки даты и времени с помощью этого ответа: MVC 4дата выпуска культуры?

...