Date picker in mvc3 with razor view engine

Question

I am using mvc3 and razor is my view engine how i get date picker with out using scripts in my
view.

Answer 1

You can create a script in the directory scripts of your project.

Basic example:

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

in your view:

@model YourProjectName.Models.User

....

<div class="editor-field">
  @Html.TextBoxFor(model => model.Dateadd, new { @Value = DateTime.Now, id = "datepicker" })
  @Html.ValidationMessageFor(model => model.Dateadd)
</div>

Answer 2

I think you are going to have to use a script, check out jqueryui datepicker. Its a nice easy to use library and supports theming

Answer 3

I answered here, check it out: http://forums.asp.net/post/4647234.aspx

Basically you're using a template with a script in one location and calling it with EditorFor.

Answer 4

To advisers here: it's a bad practice to use scripts inside partial views (templates).

In my case it does not work at all. Because accessing jquery happens before it's included as js file. Plus you cannot predict where exactly you would put this datepicker control. Also, you will have this "ready" block for every editor on the page.

RenderSection would bring some order to all this, but it does not work for partialviews and templates.

So just move javascript code from a template (partialview) to a view.

Answer 5

@model Nullable<System.DateTime>
@if ( Model.HasValue ) {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , Model.Value ) , new  { 
@class = "textbox" , @style = "width:400px;" } )
}
else {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , DateTime.Now ) , new {   
@class = "textbox" , @style = "width:400px;" } )
}

@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
$("#@id").datepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
showOptions: {
origin: ["top", "left"]
}
});
});
</script>

Answer 6

If you use an Editor Template for the DateTime type, you can use an HTML5 date picker (i.e. <input type="date" />). Essentially you put a view called DateTime.cshtml in a folder called Views/Shared/EditorTemplates, then you can style the editor however you like. One example is in an answer here.