【MVC5】日期選擇控制項DatePicker

標籤：

項目中使用了Bootstrap，日期控制項就選擇了依賴於bootstrap的DatePicker。

1. 在App_Start\BundleConfig.cs中引用css和js檔案；

   bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(                      "~/Scripts/bootstrap.js",                      "~/Scripts/respond.js",                      "~/Scripts/bootstrap-datepicker.js",                      "~/Scripts/bootstrap-datepicker.zh-CN.min.js"));            bundles.Add(new StyleBundle("~/Content/css").Include(                      "~/Content/bootstrap.min.css",                      "~/Content/bootstrap-theme.min.css",                      "~/Content/site.css",                      "~/Content/bootstrap-datepicker.min.css"));

2. 頁面載入後初始化該控制項(具體參數訪問Sample頁面查看)；
   

   @section Scripts{    <script>        $(function () {            // 日期控制項設定            $(‘.datepicker‘).datepicker({                format: "yyyy/mm/dd",                language: "zh-CN",                weekStart: 0,                todayBtn: "linked",                clearBtn: true,                keyboardNavigation: true,                todayHighlight: true,                autoclose: true            });        });    </script>}

3. 效果
   

：https://github.com/eternicode/bootstrap-datepicker

Sample：http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

【MVC5】日期選擇控制項DatePicker