javascript - 将日期选择器添加到文本框

Question

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

我已经尝试了网上给出的许多变体。我试过使用 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

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

而且我的 intellisense 不显示 datepicker 而是显示 datetimepicker.. 但我已经尝试使用两者都没有结果。使用 Razor 。

Answer 1

在此示例中，我将日期选择器添加到您的页面: http://jsfiddle.net/zkLc8vpj/

而且我仍在努力理解您为什么要使用所有这些 javascript 代码，您只需要:

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