在ASP.NET MVC 5 (Visaul Studio 2013)使用jQuery UI datepicker

1. 使用nuget安裝jQuery UI (Combined Library)

2. 在App_Start/BundleConfig.cs中加入下列片段

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js"));
...
bundles.Add(new StyleBundle("~/Content/jqueryui").Include( "~/Content/themes/base/all.css"));

3. 在cshtml加入引用

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

4. 若使用layout的話，在layout中加入初始化的script

<script type="text/javascript">
    $(document).ready(function () {
        $(".datepicker").datepicker({
            dateFormat: "yy-mm-dd"
        });
    });
</script>

5. 在TextBox的class加入datepicker即可

@Html.TextBoxFor(m => m.Date1, new { @class = "form-control datepicker" })

 

arrow
arrow
    文章標籤
    ASP.NET MVC MVC jquery ui datepicker
    全站熱搜

    kahuran 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄