【MVC5】日期选择控件DatePicker

最新推荐文章于 2025-06-03 09:04:09 发布

weixin_30699955

最新推荐文章于 2025-06-03 09:04:09 发布

阅读量804

点赞数

CC 4.0 BY-SA版权

文章标签：测试 c#

原文链接：http://www.cnblogs.com/Ryukaka/p/4831232.html

本文介绍了如何在MVC5项目中整合Bootstrap库和DatePicker插件来创建一个灵活且易用的日期选择控件。通过在App_StartBundleConfig.cs中正确引用CSS和JS文件，并在页面上初始化DatePicker插件，实现了日期选择功能的快速搭建。文章还提供了详细的代码示例和下载链接，帮助开发者轻松集成这一实用组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中使用了Bootstrap，日期控件就选择了依赖于bootstrap的DatePicker。

在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"));

页面加载后初始化该控件(具体参数访问 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>
}