如何实现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

回答

相关问题