3

私の MVC4 カミソリ エンジンでは、テキスト ボックスから日付を選択する必要があります。それは私の見解です：

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

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

開始日または終了日のテキスト ボックスをクリックすると、カレンダーが表示されます。

4

5 に答える 5

5

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>

次に、datepicker 機能を取得する必要がある要素を宣言する必要があります。

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

それに応じて Html.TextBoxFor() を編集します。

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

これでうまくいくはずです。敬具

于 2013-10-28T12:27:44.490 に答える
4

jquery datepicker を使用できます。 デートピッカーのデモ

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

jsfiddle

于 2013-10-28T12:18:52.313 に答える
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>
于 2013-10-28T12:44:39.267 に答える
2 
$(document).ready(function () {
        $('#txtBoxId').datepicker();
    });

これをレイアウトに参照してください

@Scripts.Render("~/bundles/jqueryui")
于 2013-10-28T13:19:52.783 に答える
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>
于 2015-07-26T13:12:10.587 に答える