Link for code samples used in the demo
Link for csharp, asp.net, ado.net, dotnet basics, mvc and sql server video tutorial playlists
In this video, we will discuss customizing datetime ediotr template. Please watch Part 44, before proceeding. We will be using the same example, that we worked with in Part 44.
At the moment, when you navigate to localhost/MVCDemo/Home/Edit/1, notice that, a textbox control is used as the editing interface. Notice that, for HireDate, users have to type in the date. Dates has got different formats. For example, MM/DD/YYYY or DD/MM/YY etc. So, different users may type it differently. Also, from a user experience, it is better to display a DateTime picker from which the user can simply select the date.
The built-in DateTime editor template used by MVC simply displays a textbox for editing Dates. So, let’s customize the DateTime editor template, to use jQuery calendar.
The following is the convention used by MVC to find the customized templates.
1. The customized display templates must be in a sub-folder that is named – DisplayTemplates. Editor templates must be in a sub-folder that is named – EditorTemplates.
2. These sub-folders can live in “Shared” folder, or a specific views folder. If these folders are present in the Shared folder, then the templates are available for all the views. If they are in a specific views folder, then, they are available only for that set of views.
3. The name of the template must match the name of the type. For example, as we are customizing DateTime template, the name of the template in this case has to be DateTime.ascx
Adding a Custom DateTime Editor template
Step 1: If “Shared” folder does not already exists in your project, right click on the project in solution explorer and add it.
Step 2: Right click on the “Shared” folder, and “EditorTemplates” folder.
Step 3: Right click on “EditorTemplates” folder and add a view with name = DateTime
Step 4: Copy and paste the following code in DateTime.cshtml partial view
@model DateTime?
@Html.TextBox(“”, (Model.HasValue ? Model.Value.ToString(“dd/MM/yyyy”) : string.Empty), new { @class = “date” })
Note: Please refer to the following MSDN articel for all the DateTime format strings
Step 5: Copy and paste Edit.cshtml view code from my blog using the link below.
Note: Please refer to the following jQuery link for DateTime format strings
The following jQuery scripts and css files are required for jQuery DateTime picker control. However, these files may change depending on the version of jQuery you are working with.
Scripts/jquery-1.7.1.min.js
Scripts/jquery-ui-1.8.20.min.js
Content/Site.css
Content/themes/base/jquery.ui.all.css
