2

I'm facing a strange issue. I'm currently using a customized Date Picker and DateTime picker. The first one is working correctly (data is binded) , the second not (nothing is binded).

Date Picker Helper extension :

public static MvcHtmlString BootstrapDatePickerFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var className = "pickADate";
    const string format = "{0:dd/MM/yyyy}";
    const string dataFormat = "dd/MM/yyyy";

    var dict = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    dict["class"] = dict.ContainsKey("class") ? dict["class"] + " " + "form-control" : "form-control";

    if (dict.ContainsKey("disabled"))
    {
        className = "";
    }

    var input = helper.TextBoxFor(expression, format, dict);
    const string span = "<span class=\"input-group-addon\"><span class=\"glyphicon glyphicon-calendar\"></span></span>";
    var div = string.Format("<div data-format=\"{0}\" class=\"input-group date {1}\">", dataFormat, className);
    return new MvcHtmlString(div + input.ToHtmlString() + span + "</div>");
}

Date Picker html using :

using (Html.FormGroupFor(x => x.StartDate, new { ng_class = "{'has-error': !form.StartDate.$valid}" }))
{
    @Html.LabelFor(x => x.StartDate, new { @class = "control-label" })
    @Html.BootstrapDatePickerFor(x => x.StartDate, new { @class = "form-control", @ng_required = "task.Recurrence != 'None'", @ng_model = "task.StartDate" })
}

So this part is working ... task.StartDate returns a value and the validation is working.

Now the DateTime picker , which is almost the same :

DateTime picker helper extension :

public static MvcHtmlString BootstrapDateTimePickerFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var className = "pickADateTime";
    var format = "{0:dd/MM/yyyy HH:mm}";
    var dataFormat = "dd/MM/yyyy hh:mm";

    var dict = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    dict["class"] = dict.ContainsKey("class") ? dict["class"] + " " + "form-control" : "form-control";

    if (dict.ContainsKey("disabled"))
    {
        className = "";
    }

    var input = helper.TextBoxFor(expression, format, dict);
    const string span = "<span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span>";
    var div = string.Format("<div data-format='{0}' class='input-group date {1}'>", dataFormat, className);
    return new MvcHtmlString(div + input.ToHtmlString() + span + "</div>");
}

DateTime Picker html using :

using (Html.FormGroupFor(x => x.StartDate, new { ng_class = "{'has-error': !form.StartDate.$valid}" }))
{
    @Html.LabelFor(x => x.StartDate, new { @class = "control-label" })
    @Html.BootstrapDateTimePickerFor(x => x.StartDate, new { @class = "form-control", @ng_required = "meeting.Recurrence != 'None'", @ng_model = "meeting.StartDate" })
}
<p>meeting Start Date {{meeting.StartDate}}</p>

Visual result :

enter image description here

As you can see the {{meeting.StartDate}} returns nothing. I tried a lot of things but it seems that the picking is not firing the binding ... while it's working with the date picker. Strange...

4

0 回答 0