Question

I’m trying to create a strongly type html helper extension for a date picker using jquery ui datepicker. I have created an extension that isn’t strongly typed, which works but now I’m trying to create it strongly typed.

Here is what I have:

public static MvcHtmlString DatePicker(this HtmlHelper html, string name, object date)
    {
        var inputTag = new TagBuilder("input");
        inputTag.MergeAttribute("id", name);
        inputTag.MergeAttribute("name", name);
        inputTag.MergeAttribute("type", "text");

        if (date != null)
        {
            string dateValue = String.Empty;
            if ((date is DateTime? ||date is DateTime) && (DateTime)date != DateTime.MinValue)
            {
                dateValue = ((DateTime)date).ToShortDateString();
            }
            else if (date is string)
            {
                dateValue = (string)date;
            }

            inputTag.MergeAttribute("value", dateValue);
        }

        return MvcHtmlString.Create(inputTag.ToString());
    }

This works and will persist the value. Here is what I have for my strongly typed extension.

public static MvcHtmlString DatePickerFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression) where TModel : class
    {
        Func<TModel, TProperty> myFunc = expression.Compile();
        var value = myFunc(???);

        var inputName = ExpressionHelper.GetExpressionText(expression);
        return htmlHelper.DatePicker(inputName, value);
    }

This works if I pass null for the value (value = null) but when editing, the date picker isn’t populated with a value.

How can I get the value in my DatePickerFor extension method off the model. (I know I can just pass in the value by another parameter, but I would prefer not to. Plus this is pretty interesting)

Thanks
Kevin

–EDIT——What I have as a final result———-
Note: This hasn’t been tested fully, but seems to be working right now.

public static MvcHtmlString DatePicker(this HtmlHelper html, string name, object date)
    {
        var inputTag = new TagBuilder("input");
        inputTag.MergeAttribute("id", name);
        inputTag.MergeAttribute("name", name);
        inputTag.MergeAttribute("type", "text");
        inputTag.AddCssClass("jqueryDatePicker");

        if (date != null)
        {
            string dateValue = String.Empty;
            if ((date is DateTime? ||date is DateTime) && (DateTime)date != DateTime.MinValue)
            {
                dateValue = ((DateTime)date).ToShortDateString();
            }
            else if (date is string)
            {
                dateValue = (string)date;
            }

            inputTag.MergeAttribute("value", dateValue);
        }

        return MvcHtmlString.Create(inputTag.ToString());
    }

    public static MvcHtmlString DatePickerFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression) where TModel : class
    {
        Func<TModel, TProperty> methodCall = expression.Compile();
        TProperty value = methodCall(htmlHelper.ViewData.Model);
        var inputName = ExpressionHelper.GetExpressionText(expression);

        return htmlHelper.DatePicker(inputName, value);
    }

This is using the JQuery UI datepicker script. What is “jqueryDatePicker” and why is it added as a class? Instead of calling $(#…).datepicker() to each page, I add this class and there is some javascript that will find this class and call .datepicker() for you.

Answer 1

Something like the following should work:

var input = myFunc(htmlHelper.ViewData.Model)