代码改变世界

【MVC5】日期选择控件DatePicker

2015-09-23 09:16 by JiaJia.Oct, ... 阅读, ... 评论, 收藏, 编辑

项目中使用了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. 效果
    image

下载地址: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】ASP.NET MVC 项目笔记汇总