Wednesday, June 9, 2010

ASP.NET MVC2 Editor Template for DateTime with jQuery datepicker

Equipping a textbox with datepicker using jQuery is super easy. Once all the jQuery javascript files are referenced, all you need to do is this:

 
$(document).ready(function () {
    $("#myTextbox").datepicker({
        showOn: 'focus',
        changeMonth: true,
        changeYear: true
    });
});
So now, with EditorTemplate in ASP.NET MVC2, this gets easier. So basically I can override the default EditorTemplate for System.DateTime class (which just returns a regular text-box). Once the EditorTemplate is overridden, every time there is a DateTime in edit mode, it will be displayed using my template - which display a smaller text-box and pops up a datepicker once is focus.

Here is my EditorTemplate, located at /Views/Shared/EditorTemplates/DateTime.ascx:
 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%=Html.TextBox("", (Model.HasValue ? Model.Value.ToString("MM/dd/yyyy") : DateTime.Today.ToShortDateString()), new { @class = "UseDatePicker date-text-box" })%>
Now, to declare the datepicker binding once and for all, I moved it to my master page - and instead of using the "id" of the element, use the class as the selector:
 
$(document).ready(function () {
    $(".UseDatePicker").live('click', function () {
        $(this).datepicker('destroy').datepicker({
            showOn: 'focus',
            changeMonth: true,
            changeYear: true
        }).focus();
    });
});
Now adjust the CSS for width of the text-box and other styles:
 
.date-text-box { width: 6em; }
UPDATE: Get the fully working sample project here.

Additional readings:

6 comments:

lazygekko said...

Hi Johannes,

I'm needing to do the exact same thing in an app I'm writing at the moment. Do you have an example of this being used in a simple actual application?

I'm pretty new to MVC so would be useful to see this.

Thanks,
Paul

lazygekko said...

Hi Johannes,

I'm needing to do the exact same thing in an app I'm writing at the moment. Do you have an example of this being used in a simple actual application?

I'm pretty new to MVC so would be useful to see this.

Thanks,
Paul

Johannes Setiabudi said...

Those code above are actually taken from actual real code - they are being used by an application.

There are only 4 easy things/steps:
1. Create the editor template (you can do this by copy & paste my code from the post)
2. Put the javascript in the master page (you can copy the script I posted)
3. Adjust the style in the css file you are using
4. Create a DateTime editor (i.e. <%:Html.EditorFor(m => m.ReceiptDate)%>)

elphinum said...

Hi

I understand lazygekko's question. I am well versed in Web Forms and may even call myself a bit of a Guru (Hmmm).

I am however completely new to MVC, and to enable me to consider its use I could do with sorting out a DatePicker, a DynamicDropdown etc etc. I have always found that the best way to learn is by example (complete example). I am impressed with your work here, but would like to see a full downloadable example already in a sample application.

That would have me running, whereas at the moment I feel I may need to look at other websites for such a thing. The code here is fragmented and leaves a lot of working out, trial, and also error.

Here's hoping you post a full application with a complete DateTime EditorTemplate file within it. Also, an example of it in use on your web page would just take that a step further. That would be one hell of a carrot. No point in pursuing something until you have seen you like it.

Keep up the good work.

Johannes Setiabudi said...

@elphinum and @lazygekko: you asked and you shall receive! Post is updated with a sample project in .NET 4.0

Sab said...

Mate, thank you SO MUCH for putting the source code available, it helped me like you wouldn't believe...