Проблема с JQuery DatePicker в .NetCore 2.0 MVC - PullRequest
Новая
       12

Проблема с JQuery DatePicker в .NetCore 2.0 MVC

0 голосов
/ 30 апреля 2018

Мне кажется, я пытаюсь заставить работать указатель даты Jquery в моем базовом приложении CRUD. Я использовал NuGet Package Manager для установки библиотеки Jquery UI.Combined:

https://ibb.co/mmEfic

В моем файле _Layout.cshtml у меня есть следующие теги скрипта: 

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>

(ссылка на _Layout.cshtml есть в моем файле ViewStart)

Наконец, я пытаюсь использовать Datepicker в моем View: 

@model GymTracker.ViewModel.MemberViewModel

@{
    ViewData["Title"] = "Create";
}

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



<h2>Create</h2>

<h4>Member</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DateOfBirth" class="control-label"></label>

           @Html.TextBox("datetimepicker")


            </div>
            <div class="form-group">
                <label asp-for="PaymentType" class="control-label"></label>
                @Html.DropDownListFor(model => model.PaymentType, Html.GetEnumSelectList(typeof(Membershiptype)))

                <span asp-validation-for="PaymentType" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>




@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Может кто-нибудь увидеть, что я делаю не так. Наверняка строка:

@Html.TextBox ( "DateTimePicker")

Будет ли отображаться средство выбора даты Jquery?

Любая помощь будет оценена. Спасибо

1 Ответ

0 голосов
/ 21 июня 2018

У меня была такая же проблема, но я не нашел "чистого" решения - но этот обходной путь делает работу за меня:

Создайте простое поле div и поле ввода, а затем скройте фактическое поле формы (отрегулируйте выравнивание по пробелам): 

<div>
            &nbsp;  &nbsp; Ride Date <br />
            &nbsp;  &nbsp; <input type="text" id="datepicker">
        </div>

        <div class="form-group d-none">
            <label asp-for="RideDate" class="col-md-6 control-label"></label>
            <div class="col-md-6">
                <input asp-for="RideDate" class="form-control" />
                <span asp-validation-for="RideDate" class="text-danger"></span>
            </div>
            <br />
        </div>

Поместите ID в Подтверждение: 

        <div class="row justify-content-md-center">
            <div class="form-group">
                <div class="col-md-5">
                    <button id="fixtime" type="submit" class="btn btn-primary">Add Comment</button>
                </div>
            </div>
        </div>

Затем переместите выбранную пользователем дату в фактическое поле ввода: 

    <script>
        $(document).ready(function () {
            $('#datepicker').datepicker({
                uiLibrary: 'bootstrap4'
            });
            //load current date into datapicker

            var now = new Date();
            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var today = month + '/' + day + '/' + now.getFullYear();
            //alert(today);
            $('#datepicker').val(today);

            //$("#RideDate").val(now.getFullYear() + "-" + month + "-" + day);  // not needed

            $("#fixtime").click(function () {
                var fix = $("#datepicker").val(); // from datepicker mm/dd/yyyy to ASP yyyy-mm-dd
                var fix2 = fix.substr(6) + "-" + fix.substr(0, 2) + "-" + fix.substr(3, 2);
                $("#RideDate").val(fix2);
                //alert("ride date = " +  $("#RideDate").val());
            });
        });
    </script>

Не очень элегантно, но работает нормально. м

...