Question

我正在根据日期范围搜索数据库中的数据。

在搜索框中，如何从数据采集器中选择数据。

这是我的代码：

 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>

提前谢谢

Answer 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，您就会找到更多选项..

Datepicker用于过滤具有日期范围的数据

1 个答案: