Bootstrap v3 datetimePicker не загружается на странице. Идет только простое текстовое поле - PullRequest
Новая
       27

Bootstrap v3 datetimePicker не загружается на странице. Идет только простое текстовое поле

0 голосов
/ 11 апреля 2019

Я хочу добавить средство выбора даты начальной загрузки bootstrap v3 в мой проект asp.net mvc 5. Сборщик не приходит, когда я нажимаю на поле даты и времени, появляется только простое текстовое поле.

Для этого я создал пакет всех файлов css и javascript, связанных с Jquery и Bootstrap DateTime Picker. Я поместил все файлы javascript в один комплект, а все файлы css - в другой комплект и включил его, используя сценарии рендеринга и стили в _Layout.cshtml

Вид модели только для свойства Datetime выглядит следующим образом. «Sdate» - это свойство Datetime, которое я выбрал, и для этого свойства я хочу выбрать Datetime. 

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

Файл BundleConfig.cs содержит следующий код- 

public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {


            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

                       ));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                         "~/Content/bootstrap-datetimepicker.css",
                         "~/Content/bootstrap-theme.css",
                         "~/Content/Site.css"
                         ));





            bundles.Add(new ScriptBundle("~/bundles/myscripts").Include(
                  "~/Scripts/jquery-3.3.1.js",
                  "~/Scripts/moment.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datetimepicker.js",
                  "~/Scripts/Site.js"
                  ));
        }
}

Site.js, который я включил в комплект скриптов, содержит следующий код: 

$(function () {
    $('.datetimePicker').datetimepicker();
});

_layout.cshtml содержит следующий код- 

<!DOCTYPE html>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" http-equiv="X-UA-Compatible" content="IE=Edge, width=device-width, initial-scale=1.0">
    <link href="~/Content/logo-nav.css" rel="stylesheet" type="text/css" />


    @RenderSection("head", required: false)
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")




    <script type="text/javascript">

        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
    </script>




</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container" style="margin-left: 5px; margin-right: 5px;">
            <!-- Force the margin to keep the content from being centered on full screen.  The content itself, not the menu, it too wide causing an odd display if centered.-->
            @*<div class="col-lg-1">
                    <img src="~/Images/dell-logo-small.png" />
                </div>*@
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div>
                    <img src="~/Images/dell-logo-small.png" /> @Html.ActionLink("FileTransfer Admin", "Index", "Home")
                </div>
                @*<a class="brand" href="Index.html"><img src="~/Images/dell-logo-small.png" title="File Transfer Admin" alt="File Transfer Admin" /></a>*@
                @*@Html.ActionLink("File Transfer Admin", "Index", "Home", null, new { @class = "navbar-brand" })*@
                @*@Html.ActionLink("File Transfer Admin", "Index", "Home", new { style = "background-image: url('../Images/dell-logo-small.png')  no-repeat; " })*@
                @*@Html.ActionLink("File Transfer Admin", "Index", "Home")*@
                @*@Html.ActionLink("File Transfer Admin", "Index",null, new { @class="DellLogo" }) %>*@
                @*new { style = "background: url('../Images/dell-logo-small.png') no-repeat; center right; display:block; height:84px; width:264px;" })*@
                @*<a href='<%: Url.Action("File Transfer Admin","Index", "Home") %>'>
                        <img src='<%: Url.Content("~/Images/dell-logo-small.png") %>' />
                    </a>*@
            </div>
            <div class="navbar-collapse navbar-ex5-collapse collapse">
                <!-- Set the min-width here to prevent menu wrapping.  Not a good solution as the collapse still happens after the menu is drawn off the screen.-->
                <ul class="nav navbar-nav">
                    <li class="@(ViewBag.Title == "Admin Tool" ? "active" : string.Empty)">@Html.ActionLink("Home", "Index", "Home")</li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                            Upload Status<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="@(ViewBag.Title == "Upload Status" ? "active" : string.Empty)">@Html.ActionLink("Upload Status", "UploadStatus", "Home")</li>
                            <li class="@(ViewBag.Title == "CTM Upload Status" ? "active" : string.Empty)">@Html.ActionLink("Pre-SI Uploads", "CTMUploadStatus", "Home")</li>
                        </ul>
                    </li>
                    <li class="@(ViewBag.Title == "App Log Status" ? "active" : string.Empty)">@Html.ActionLink("App Logs", "ApplicationLogStatus", "Home")</li>
                    <li class="@(ViewBag.Title == "CC Recon Status" ? "active" : string.Empty)">@Html.ActionLink("CC Recon Status", "CCReconstitutionStatus", "Home")</li>
                    <li class="@(ViewBag.Title == "Recon Status" ? "active" : string.Empty)">@Html.ActionLink("Recon Status", "DDUPReconstitutionStatus", "Home")</li>
                    <li class="@(ViewBag.Title == "Recon Event Logs" ? "active" : string.Empty)">@Html.ActionLink("Recon Event Logs", "ReconEventLogs", "Home")</li>
                    <li class="@(ViewBag.Title == "Project Event Logs" ? "active" : string.Empty)">@Html.ActionLink("Project Event Logs", "ProjectEventLogs", "Home")</li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                            Configuration<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="@(ViewBag.Title == "Client Configuration" ? "active" : string.Empty)">@Html.ActionLink("Client Configuration", "ConfigLogs", "Home")</li>
                            <li class="@(ViewBag.Title == "Transfer Mapping" ? "active" : string.Empty)">@Html.ActionLink("Transfer Mapping", "Index", "ECSafeZone")</li>
                            <li class="@(ViewBag.Title == "User Configuration" ? "active" : string.Empty)">@Html.ActionLink("User Configuration ", "UserConfig", "Home")</li>
                            <li class="@(ViewBag.Title == "Operating Systems" ? "active" : string.Empty)">@Html.ActionLink("Operating Systems", "OperatingSystems", "OperatingSystems")</li>
                        </ul>
                    </li>
                    <li class="@(ViewBag.Title == "Manifest Viewer" ? "active" : string.Empty)">@Html.ActionLink("Manifest Viewer", "ManifestViewer", "ManifestViewer")</li>
                    <li class="@(ViewBag.Title == "SI History" ? "active" : string.Empty)">@Html.ActionLink("Search FTA History", "SIHistory", "Home")</li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                            Reports<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="@(ViewBag.Title == "Upload Report" ? "active" : string.Empty)">@Html.ActionLink("Upload Report", "UploadReport", "Home")</li>
                            <li class="@(ViewBag.Title == "Recon Report" ? "active" : string.Empty)">@Html.ActionLink("Recon Report", "ReconReport", "Home")</li>
                            <li class="@(ViewBag.Title == "CCRecon Report" ? "active" : string.Empty)">@Html.ActionLink("CCRecon Report", "CCReconReport", "Home")</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main" class="container body-content" style="margin-left: 15px; margin-right: 15px">

        @RenderBody()
    </div>

 @Scripts.Render("~/bundles/myscripts")


</body>
</html>

Результаты, которые я ожидаю, - это когда по щелчку в поле ввода Sdate загружается DateTime Picker. но фактические результаты - только текстовое поле.

...