UI For ASP.Net MVC - DateTimePicker

Here is a tutorial to help you add a feature on the DatePicker and DateTimePicker controls UI for ASP.NET MVC of Telerik .

By default, these controls will not open when you click on the text field and there is no property to do so:

Here is how to add this feature.

1. ExtendedDatePicker

Create a new ExtendedDatePicker object that will allow extending the DatePicker and contain a new ShowOnClick property as in the following:

public class ExtendedDatePickerBuilder : DatePickerBuilder
{
/// <summary>
/// Boolean that store show on click
/// </summary>
public bool ShowOnClick { get; set; }
public ExtendedDatePickerBuilder(DatePickerBuilder datePicker)
: base(datePicker)
{
}
}

2. HtmlExtensions

It will now act to create a HTML extension to extend our DatePicker and initialize the ShowOnClick:

public static class HtmlKendoExtensions
{
/// <summary>
/// Expand the DatePickerBuilder Telerik to our custom ExtendedDatePickerBuilder
/// </summary>
/// <param name="datePickerBuilder"></param>
/// <returns></returns>
public static ExtendedDatePickerBuilder Extend(this DatePickerBuilder datePickerBuilder)
{
return new ExtendedDatePickerBuilder(datePickerBuilder);
}
/// <summary>
/// Set the ShowOnClick option to true
/// </summary>
/// <param name="datePickerBuilder"></param>
/// <returns></returns>
public static ExtendedDatePickerBuilder ShowOnClick(this ExtendedDatePickerBuilder datePickerBuilder)
{
datePickerBuilder.ShowOnClick = true;
return datePickerBuilder;
}
}

3. View (cshtml)

Now it is possible to extend in our views Kendo DatePicker and DatePickerFor controls with our extension.

File in your WebApp: Go to Views, Shared, then EditorTemplates to create a Date.cshtml.

@model DateTime?
@(Html.Kendo().DatePickerFor(m => m).Extend().ShowOnClick())

So just to extend the DatePicker, call our ShowOnClick() extension.

4. ToHtmlString()

Now to override the ToHtmlString() method to render in the HTML the DatePicker and add our JavaScript script that will open the datepicker in the browser to the click.

To do this, add the following method in our ExtendedDatePickerBuilder class as in the following:

#region overriding
public override string ToHtmlString()
{
StringBuilder sbShowOnFocus = new StringBuilder(" ");
if (ShowOnClick)
{
sbShowOnFocus.Append("<script type=\"text/javascript\">");
sbShowOnFocus.Append("$(document).ready(function () {");
sbShowOnFocus.Append(" $(\"input[name='" + base.Component.Name + "']\").click(function() {");
sbShowOnFocus.Append(" var datepicker = $(\"input[name='" + base.Component.Name + "']\").data(\"kendoDatePicker\");");
sbShowOnFocus.Append(" datepicker.open();");
sbShowOnFocus.Append(" });");
sbShowOnFocus.Append("});");
sbShowOnFocus.Append("</script>");
}
var mvcHtmlStringResult = MvcHtmlString.Create(sbShowOnFocus.ToString());
return base.ToHtmlString() + mvcHtmlStringResult.ToString();
}
#endregion

After the page is loaded, this script allows to add a subscription to a click on the control to open the DatePicker.

5. End !

With this method, you can add other properties on your controls.

When controls are loaded, a click on the control opens the DatePicker as in the following:

The benefit of this method is to limit the impact on the JavaScript of the Kendo controls in your application and to be less dependent on third-party controls.

Next, you can add other properties like ShowOnFocus or other methods on your control!

Note: Attention, with a direct legacy: ExtendedDatePickerBuilder: DatePickerBuilder, it is possible, after the ShowOnClick() method in the view, to recall other extensions specific to the DatePicker. Ideally, therefore we do not have inheritance, but this will be the subject of a second tutorial because it adds complexity.

6 Comments

Join the conversation! Your thoughts help the community grow.

Mathieu Mack11y ago
Thanks for messages ;).
Santhakumar Munuswamy11y ago
Welcome
Santhakumar Munuswamy11y ago
Good Start
Vipul Malhotra11y ago
Thanks for sharing
Shailesh Uke11y ago
Nice Article............
Debasis Saha11y ago
Nice article