当我点击文本框时如何添加日期选择器？

Question

当我点击文本框时如何添加日期选择器？

javascriptjqueryvb.netasp.net-mvc-4razor

3

在我的MVC4 Razor引擎中，我需要从文本框中选择日期。以下是我的视图代码:

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

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

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

- Shu

1

你想要做什么？你想为此创建一个MVC助手还是只是使用jQuery DateTimePicker()？ - Marco

是的，我需要日期选择器...不知道如何在我的.vbhtml（视图页面）中使用。 - Shu

请查看此视频，只需将<input/>更改为@Html.Textbox。 - AthibaN

5个回答

4

您可以使用jQuery日期选择器。日期选择器演示

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

jsfiddle

- Saritha.S.R

4

<!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>

- Kousik

这不是 Razor 语法。 - Marco

2

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

请将此参考内容应用到您的布局中

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

- Aritra B

0

<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>

- Minal Raniga

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marco · Accepted Answer

如果你正在使用MVC，jQuery 应该已经在你的布局页面中引用了。你还需要jqueryUI。

如果datepicker代码出现错误，请在你的视图或布局页中添加以下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"})

这应该能解决问题。祝好。