實作DatePicker 日期選擇 for MVC

實作完成圖

實作開始

運用Nuget安裝JQuery-UI .js 檔

1. 方案右鍵→管理NuGet套件

2. 搜尋JQuery

3. 找到JQuery.UI 後安裝到方案

建立DatePickerjs

在Scripts新增DatePicker.js

在DatePicker.js 加入程式碼

$(function () {

    $(".datepicker").datepicker({

    });

    $(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");

});

(可於jQuery 查看其他Demo)

在App_Start/BundleConfig.cs 引用下載的js及建立的js檔

1. 新增以下兩行程式碼

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

            bundles.Add(new ScriptBundle("~/bundles/DatePicker").Include(

                        "~/Scripts/DatePicker.js"));

在View/Shared/_Layout.cshtml 加入程式碼

    @Scripts.Render("~/bundles/jquery-ui")
    @Scripts.Render("~/bundles/DatePicker")

就可以在view裡 (你要使用的Text中的class加入datepicker)

@Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control datepicker" } })

修改日期選擇器 css

加入此行程式碼
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">

(可以於jQuery 網站修改你要的樣式)