单击文本框时如何添加 DatePicker？答案

【问题标题】：How to add DatePicker when I click on text box?单击文本框时如何添加 DatePicker？
【发布时间】：2013-10-28 12:16:08
【问题描述】：

在我的 MVC4 剃须刀引擎中，我需要从文本框中选择日期。这是我的观点：

<tr>
  <td>Start Date</td>
  <td>@Html.TextBox("RateListStartDate")</td>
</tr>

<tr>
  <td>End Date</td>
  <td>@Html.TextBox("RateListEndDate")</td>
</tr>

当我点击开始日期或结束日期的文本框时，它应该显示日历。

【问题讨论】：

你到底想做什么。你想为此创建一个 MVC 帮助程序还是只使用 jQuery DateTimePicker()？
是的，我需要 datepicker...不知道如何在我的 .vbhtml（查看页面）中使用...
勾选这个Video，把<input/>改成@Html.Textbox

标签： javascript jquery vb.net asp.net-mvc-4 razor

【解决方案1】：

由于您使用 MVC，jQuery“应该”已经在您的布局页面中引用。您还需要jqueryUI。

如果日期选择器代码向您抛出错误，请将以下 2 行添加到您的视图或布局页面：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

然后你需要声明元素，这应该是获取日期选择器的功能。

$(document).ready(function(){
    $(".getdate").each(function() {
        $(this).datepicker();
    });
});

并相应地编辑您的 Html.TextBoxFor()：

@Html.TextBox("RateListStartDate", new {@class="getdate"})

这应该可以解决问题。亲切的问候

【讨论】：

@Serv... 不，我不能引用 jquery 文件...如何引用 jquery 文件？？？
我已经更新了我的答案。 jQuery 应该是开箱即用的，但我不确定 jQueryUI 文件。将这些行添加到您的视图/布局中以防万一
@Serv .. 我照你说的做了...但它显示错误类型或预期在这一行 @Html.TextBoxFor("RateListStartDate", new {@class="getdate"} )
啊，我的错。我一直在使用 TextBoxFor，但您需要的是 @Html.TextBox(...) 没有 for。我已经更新了我的答案。

【解决方案2】：

您可以使用 jquery 日期选择器。 DATEPICKER DEMO

$(document).ready(function(){
    $(".datepicker").each(function() {
        $(this).datepicker();
    });
});

jsfiddle

【讨论】：

【解决方案3】：

<!doctype html>
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(function() {
      $( "#datepicker" ).datepicker({ minDate: -100, maxDate: "+0D" });
      $("#datepicker").datepicker("setDate",new Date());
      $( "#datepicker" ).datepicker( "option", "dateFormat", "dd/mm/yy");
    });
</script>
</head>
<body>
  <p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

【讨论】：

这不是 Razor 语法。

【解决方案4】：

$(document).ready(function () {
        $('#txtBoxId').datepicker();
    });

参考你的布局

@Scripts.Render("~/bundles/jqueryui")

【讨论】：

【解决方案5】：

<script>
    $(function()
    {
        $("#date").datepicker();
        $("#date").datepicker
        ({
            dateFormat: "dd-mm-yyyy"
        });
    });
</script>

<tr>
  <td>Start Date</td>
    <div class="form-group">
            @Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label   col-md-2" })
            <div class="col-md-10">
                            @Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "date" } })
                            @Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
                    </div>
        </div>
</tr>

<tr>
  <td>End Date</td>
    <div class="form-group">
            @Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label   col-md-2" })
            <div class="col-md-10">
                            @Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "date" } })
                            @Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
                    </div>
        </div>
</tr>

【讨论】：