I am searching data on the database in accordance to date range.
In the search box how can I make the data to be picked from the datapicker.
Here is my code :
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();
and my 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>
Thank you in advance
You can use 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>
Working JSFIDDLE: http://jsfiddle.net/18h8zfr8/
Just go through DatePicker API, you will find more options..