0

日付範囲に従ってデータベース上のデータを検索しています。

検索ボックスで、データピッカーからデータを選択する方法を教えてください。

これが私のコードです:

 public ActionResult List(DateTime startDate, DateTime endDate)
    {
        //var cards = new List<Card>();

        //using (CardDBEntities _db = new CardDBEntities() )
        //{
        //    cards = _db.Cards.ToList();
        //}

        using (var db = new CardDBEntities())
        {
            var cards = (from c in db.Cards
                         join d in db.RegistrationDTs
                         on c.CardId equals d.CardId
                         where d.RegistrationDateTime >= startDate &&
                               d.RegistrationDateTime <= endDate
                         select new Model
                         {
                             CardId = d.CardId,
                             Description = c.Description,
                             RegistrationDateTime = d.RegistrationDateTime
                         }).OrderByDescending(x => x.RegistrationDateTime)
                          .ToList();

            ViewData["cards"] = cards;

            return View();

と私の見解：

@using(Html.BeginForm())
{
<fieldset>
    <legend>Search criteria</legend>
    @Html.Label("startDate", "Start Date:")
    @Html.TextBox("startDate", null, new { @class = "DateTime" })
    @Html.Label("endDate", "End Date:")
    @Html.TextBox("endDate", null, new { @class = "DateTime" })
    <input type="submit" value="Apply" />
</fieldset>

前もって感謝します

4

1 に答える 1

1

jQueryUI DatePickerを使用できます 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">


</body>
</html>

JSFIDDLE の作業: http://jsfiddle.net/18h8zfr8/

DatePicker APIを通過するだけで、より多くのオプションが見つかります..

于 2014-08-14T14:10:58.380 に答える