如何實現JqueryUI Datepicker

-1

如何從JqueryUI Datepicker庫實現DateTime Picker。如何實現JqueryUI Datepicker

到目前爲止，我已經folowed這些步驟http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/ 在哪裏我也做了前3個步驟，現在我現在不如何推動這樣我就可以實現的日期時間選取器？

我有什麼編碼到目前爲止是在模型類我的日期時間變量，像這樣

[DataType(DataType.Date)] 
    public DateTime Date { get; set; }

在我創建視圖我有這個

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

    <div class="form-horizontal"> 
     <h4>Job</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

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

在我BundleConfig類，我有我已執行

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
     "~/Scripts/jquery-ui-{version}.js")); 

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
     "~/Content/themes/base/jquery.ui.core.css", 
     "~/Content/themes/base/jquery.ui.datepicker.css", 
     "~/Content/themes/base/jquery.ui.theme.css"));

並在_Layout.cshtml我已實施

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

來源

2016-02-28 Eldin

你需要添加一些純JavaScript代碼，這樣的：http://jqueryui.com/datepicker/（點擊查看源代碼）。

<script> 
$(function() { 
    $("#datepicker").datepicker(); 
}); 
</script>

，而不是「#datepicker」你需要用你的約會編輯或「.FORM - 控制」這是有這樣的類名

來源

2016-02-28 16:15:07

我整個_layout類的所有編輯的ID，這是正確的，對？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
<meta name="description" content="The description of my page" /> 
</head> 
<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <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> 
      @Html.ActionLink("Substi", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "ChooseTeacher", "Substitutes")</li> 
       <li>@Html.ActionLink("All Schools", "Index", "Schools")</li> 
       <li>@Html.ActionLink("All Teachers", "Index", "Teachers")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
      </ul> 
      @Html.Partial("_LoginPartial") 
     </div> 
    </div> 
</div> 
<div class="container body-content"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
    </footer> 
</div> 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/jqueryui") 
@RenderSection("scripts", required: false) 
</body> 
</html>

來源

2016-02-28 17:27:21 Eldin

如何實現JqueryUI Datepicker

回答

相關問題