Проблема в использовании jQuery datepicker в asp.net mvc

Question

Я хочу добавить указатель даты Jquery в форму TimeofCreation.Я не могу получить указатель даты или кнопку выбора.Пожалуйста, помогите в использовании средства выбора даты с jquery.

Я хочу, чтобы календарь дат появлялся, когда пользователь щелкает форму TimeofCreation.

Код класса донора выглядит следующим образом

   public class Donor
   {
      [Key]
     public int Id { get; set; }
     public string FullName { get; set; }
     public int PhoneNumber { get; set; }
     public DateTime TimeofCreation { get; set; }
     public string Emergency { get; set; }
     public string Address { get; set; }
     public BloodType BloodList    { get; set; }
     public string BagsNumber { get; set; }
     public DateTime LastTimeDonation { get; set; }

   }

Мой код просмотра следующим образом.

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

<div class="form-group">
    @Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new { 
    @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.TimeofCreation, new { 
        htmlAttributes = new { @class = "datepicker" } })
        @Html.ValidationMessageFor(model => model.TimeofCreation, "", new 
       { @class = "text-danger" })
        </div>

        </div>


@section Scripts {
    <script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")


    <script type="text/javascript">
         <script>

    $('.datepicker').datepicker({
        dateFormat: "dd/M/yy",
        changeMonth: true,
        changeYear: true,
        yearRange: "-60:+0"
    });
</script>
    </script>

}

Answer 1

Здесь проблема с вами не добавляется jquery-ui.css файл, а другая проблема заключается в том, что вы загрузили несколько раз jquery и jquery-ui js файлы. либо используйте внешний файл сценария js, либо используйте bundle.

, а также порядок вашего внешнего файла скрипта неправильный, он должен быть первым jquery после использования jquery-ui file

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>

например, я использовал это и удалил связку.

и добавьте jquery-ui.css файл

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

после этого вы можете увидеть свой datepicker

после изменений код выглядит как

@model MVC5.Models.Donor
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-group">
            @Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TimeofCreation, new { htmlAttributes = new { @class = "datepicker" } })
                @Html.ValidationMessageFor(model => model.TimeofCreation, "", new { @class = "text-danger" })
            </div>

        </div>
    }

    @section Scripts {
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
        <script type="text/javascript">

            $('.datepicker').datepicker({
                dateFormat: "dd/M/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-60:+0"
            });
        </script>
    }

Надеюсь, это поможет вам. дайте мне знать, если потребуется дополнительная информация.

Answer 2

Похоже, вы пытаетесь применить указатель даты для ввода [type = datetime], но я не вижу этого в группе форм.

Попробуйте связать его с классом так:

$('.datepicker').datepicker({ dateFormat: "dd/M/yy", changeMonth: true, changeYear: true, yearRange: "-60:+0" });