Как использовать datepicker на MVC Core в форме ASP - PullRequest
Новая
       67

Как использовать datepicker на MVC Core в форме ASP

0 голосов
/ 27 мая 2020

В моем MVC основном веб-приложении я не вижу datepicker во всех браузерах, поэтому я хотел бы использовать jQuery datepicker.

В настоящее время в моей модели у меня есть: 

    [Required]
    [Display(Name = "RegisterDate")]
    //[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd hh:mm:ss}")]
    public override DateTime RegisterDate { get; set; }

В файле. html у меня есть: (это всего лишь несколько фрагментов кода) 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#datepicker" ).datepicker();
} );
</script>
...
            <div class="form-group">
            <label asp-for="RegisterDate" class="control-label"></label>
            <input asp-for="RegisterDate" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
            <span asp-validation-for="RegistertDate" class="text-danger"></span>
        </div>

Мой вопрос: как мне заставить jquery datepicker работать над этим? Я не хочу загружать какие-либо пакеты NuGet из-за некоторых зависимостей от проекта. Я предпочитаю работать с CDN.

Заранее спасибо за помощь.

Ответы [ 3 ]

1 голос
/ 28 мая 2020

Для ядра asp. net, если вы используете шаблон по умолчанию MVC и не отключаете макет, вам нужно добавить @section Scripts{}.

Ссылка:

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.1#sections

Также убедитесь, что тип ввода должен быть текстовым, чтобы избежать Html5 datepicker по умолчанию: 

<div class="form-group">
    <label asp-for="RegisterDate" class="control-label"></label>
    <input asp-for="RegisterDate" id="datepicker" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
    <span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>
}

Результат (я использовал Google Chrome):

enter image description here

Обновление:

Если вы хотите использовать datetimepicker, вот рабочая демонстрация, как показано ниже: 

@model Test
<div class="form-group">
    <label asp-for="RegisterDate" class="control-label"></label>
    <div class='input-group date' id='datepicker'>
        <input asp-for="RegisterDate" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    <span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>

@section Scripts
    {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    <script>
        $(function () {
            $('#datepicker').datetimepicker();
        });
    </script>
}

Результат: enter image description here

1 голос
/ 27 мая 2020

В поле ввода нужно добавить datepicker id: 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#datepicker" ).datepicker();
} );
</script>
...
        <div class="form-group">
            <label asp-for="RegisterDate" class="control-label"></label>
            <input asp-for="RegisterDate" id="datepicker" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")"/>
            <span asp-validation-for="RegistertDate" class="text-danger"></span>
        </div>
0 голосов
/ 28 мая 2020

То, что #datepicker указывает идентификатор текстового поля, в которое должна быть добавлена ​​функция datepicker, и я нигде не вижу этот идентификатор в вашем текстовом поле. Вот почему он не работает.

Также нет необходимости устанавливать значение в текстовое поле, потому что после того, как вы выберете дату, оно автоматически установит выбранную дату в текстовое поле.

Примечание: Пожалуйста, запустите фрагмент кода 

$(function() {
  $("#datepicker").datepicker();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group">
  <label asp-for="RegisterDate" class="control-label"></label>
  <input asp-for="RegisterDate" id="datepicker" class="form-control" placeholder="select date" />
  <span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>
...