将日期选择器添加到文本框答案

【问题标题】：Adding date picker to textbox将日期选择器添加到文本框
【发布时间】：2015-12-10 13:57:06
【问题描述】：

我需要将两个日期作为过滤器传递给我的控制器。我在视图中有两个文本框，我需要在单击时弹出日期选择器。

我尝试了网上给出的许多变体。我尝试过使用 Bootstrap Datepicker 和 JqueryUI。但两者似乎都没有给我任何输出

<th>
     @*<input class="date-picker" />
     <input type="text"  name="from" class="date-picker"/>*@
     <p>
       From : <input type="text" name="from"  id="from"/>
       <br />
       To : <input type="text" name="to" id="to"/>
     </p>
</th>

脚本

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#from').datepicker();

        $('#from').focus(function () {
            $('#from').datepicker('show');
        });

        $('#from').click(function () {
            $('#from').datepicker('show');
        });
        //$('#ui-datepicker-div').show();
        $('#from').datepicker('show');
    });
</script>

是否有任何特定的地方我应该添加这些脚本。现在我已经在头部添加了脚本。但我已经尝试在正文之后添加它。我还在布局的末尾添加了以下内容。

@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryajax")
@Scripts.Render("~/bundles/bootstrap") in the layout

脚本文件的顺序有问题吗？

而我的智能感知不显示 datepicker 而是显示 datetimepicker.. 但我尝试使用两者都没有结果。使用剃须刀。

【问题讨论】：

您使用的不是 HTML 或 CSS 吗？ @Scripts.Render() 是剃刀吗？
是的，我正在使用剃须刀。我正在开发一个 MVC5 应用程序。在我的问题中添加了详细信息
最好标记它，以便 Razor 用户可以看到它。
您能说出控制台中发生了什么吗？有什么错误吗？
我尝试在控制台中为脚本设置断点。它被击中了，但我找不到按钮点击发生的任何事情

标签： javascript jquery twitter-bootstrap razor datepicker

【解决方案1】：

在此示例中，我将 datepicker 添加到您的页面： http://jsfiddle.net/zkLc8vpj/

我还在试图理解你为什么使用所有这些 javascript 代码，你只需要：

$(document).ready(function () {
    $('#from, #to').datepicker();
});

【讨论】：

在添加我的所有这些代码之前，我也单独尝试过使用您的代码。我在一些教程上找到的。
我敢打赌，问题在于您如何在视图中添加 javascript 您确定要将其添加到布局页面的脚本部分吗？
我认为与@stibay 相同，否则此代码应该可以正常工作。
@SerhanKarakaya：我不确定我应该在哪里添加脚本以及我应该遵循什么顺序.. :( 正如我已经提到的那样，我的智能感知不显示 datepicker 而是显示 datetimepicker。
我已经更改了脚本文件的顺序并且它起作用了。

【解决方案2】：

所以我发现问题在于脚本文件的顺序。 this 帮助我找到了解决方案。我在html文件的头部按以下顺序添加了脚本文件

@Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/datepicker3.css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Content/bootstrap-datepicker.js")

在捆绑配置中我添加了以下内容。添加了完整的捆绑文件以避免将来的读者混淆

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

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

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/Custom.css"));
        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/core.css",
      "~/Content/themes/base/resizable.css",
      "~/Content/themes/base/selectable.css",
      "~/Content/themes/base/accordion.css",
      "~/Content/themes/base/autocomplete.css",
      "~/Content/themes/base/button.css",
      "~/Content/themes/base/.dialog.css",
      "~/Content/themes/base/slider.css",
      "~/Content/themes/base/tabs.css",
      "~/Content/themes/base/datepicker.css",
      "~/Content/themes/base/progressbar.css",
      "~/Content/themes/base/theme.css")); 

    }

不过，我没有对布局进行任何更改。 answer 有它如何调用日期选择器。

【讨论】：