On All Things Web

Apr 10

The freely available ASP.NET MVC framework by Telerik has added a new DatePicker control that works similarly to the RadDatePicker control in its ASP.NET AJAX framework.  Below is a sample of that control:


<%
    Html.Telerik().DatePicker().Name(“Picker”)
        .ButtonTitle(“Select Date”)
        .ClientEvents((evt) =>
            {
                evt.OnChange(() =>
                    {
                    %>
                        function(e) {
                            $(“#output”).html(“Value changed to ” + e.date);
                        }
                    <%   
                });
            })
        .Value(DateTime.Now)
        .MaxDate(DateTime.Now.AddYears(3))
        .MinDate(DateTime.Now.Subtract(new TimeSpan(1000, 0, 0, 0)))
        .Render();
%>


Note that this date picker has some of the same properties as the calendar in my previous post.  The MaxDate, MinDate, ClientEvents, etc are the same properties available in both, as you have access to a wide array of options available to you).  The value property allows the defaulting of the current date as I’ve currently set, as well as a tooltip for the button, which is shown as a tooltip in the image below.



Clicking on the button shows a calendar control.  Clicking on the date fires our client-side change handler.  Our handler writes out the selected date to the browser as is, which renders the option below.



Currently, the selected date is 4/13/2010; clicking on the 22nd will fire the change event, making available an e.date property with the new date.  By using the client-side equivalent handler, for both the date picker and calendar, you avoid the postback to the server to an action method, saving on resources.

4 comments so far

  1. lydia
    1:46 pm - 8-2-2010

    i test this compentents in my mvc project but the are some problems the popup button is disabled

  2. bmains
    12:40 pm - 8-13-2010

    Hmm, I didn’t have any issue… you have the telerik script files in the project? Do you see a javascript error? What does the MVC control definition look like?

  3. Thomas
    12:05 pm - 8-18-2010

    Hi
    Is there any way to get this control to show the week numbers and to start the week with Monday?

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>