Date picker in mvc3 with razor view engine without using jquery - asp.net-mvc-3

Question

I am new to mvc3 and i am using c# coding and razor my view engine. Is there any way to use date picker with out using jquery and something else.

Answer 1

If you don't use javascript and jquery, well, you are left with HTML. And you know that in HTML you have standard input fields such as <input type="text">. Using pure HTML you cannot make a dynamic datepicker show when the user clicks on some date input.

Answer 2

Well, if you want to avoid "all scripting languages" I suppose you should have three dropdowns,
Months (1 - 12)
Days (1 - 31)
Years
Your Model would need to take three seperate fields for Month, Day and Year. Then in your controller action you will need to do some Date parsing to make sure it is a valid date and if not, add a ModelState Exception.
Since MVC comes with jQuery (and the validators are very helpful), why are you trying to avoid using them?
All of it COULD be done with jQuery or even plain JavaScript so you're really limiting yourself.
EDIT - Adding code sample
Your Model
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public class DatePickerViewModel
{
[Required]
[DisplayName("Month")]
[Range(1,12,ErrorMessage = "Month must be between 1 and 12")]
public int? Date_Month {get;set;}
[Required]
[DisplayName("Day")]
[Range(1,31,ErrorMessage = "Day must be between 1 and 31")]
public int? Date_Day {get;set;}
[Required]
[DisplayName("Day")]
[Range(1900,2012,ErrorMessage = "Year must be between 1900 and 2012")]
public int? Date_Year {get;set;}
}
Your controller
public class DatePickerController : Controller
{
[HttpGet]
public ActionResult Choose()
{
return View(new DatePickerViewModel());
}
[HttpPost]
public ActionResult Choose(DatePickerViewModel model)
{
if(!ModelState.IsValid)
return View(model);
else
{
DateTime date;
if(!DateTime.TryParse(String.Format("{0}/{1}/{2}",model.Date_Month, model.Date_Day, model.Date_Year),out dt))
{
ModelState.AddModelError("","Invalid Date");
return View(model);
}
//Do something with the variable "date"
return View("SomeOtherView");
}
}
}
And your view
#model DatePickerViewModel
#using(Html.BeginForm())
{
<div>
<div>#Html.LabelFor(m => m.Date_Month) #Html.ValidationMessageFor( m => m.Date_Month)</div>
<div>#Html.DropDownListFor(m => m.Date_Month, (from n in Enumerable.Range(0, 12) select new SelectListItem{ Text = n==0? "":n.ToString(),Value = n ==0? "":n.ToString()})</div>
</div>
<div>
<div>#Html.LabelFor(m => m.Date_Day) #Html.ValidationMessageFor( m => m.Date_Day)</div>
<div>#Html.DropDownListFor(m => m.Date_Day, (from n in Enumerable.Range(0, 31) select new SelectListItem{ Text = n==0? "":n.ToString(),Value = n ==0? "":n.ToString()})</div>
</div>
<div>
<div>#Html.LabelFor(m => m.Date_Year) #Html.ValidationMessageFor( m => m.Date_Year)</div>
<div>#Html.DropDownListFor(m => m.Date_Year, (from n in Enumerable.Range(1899, 2012) select new SelectListItem{ Text = n==1899? "":n.ToString(),Value = n == 1899? "":n.ToString()})</div>
</div>
<div><input type="submit" value="Submit"/></div>
}
As you can see, the amound of raw code you need to create just to enable a date selector without using JavaScript at all is pretty large. Considering if you were to just use ANY jQuery date picker all you would need is a nullable DateTime property on your Model/ViewModel, a textbox on your view and a small snippet of JS to turn the text box in to a date selector.
Avoid re-inventing the wheel and reuse code that is already out there for how to use any jQuery Date Picker plugin.