bootstrap datetime picker不绑定角度模型

时间:2014-10-22 11:28:09

标签: asp.net-mvc angularjs twitter-bootstrap bootstrap-datetimepicker

我面临一个奇怪的问题。我目前正在使用自定义日期选择器和日期时间选择器。第一个是正常工作(数据绑定),第二个没有(没有绑定)。

日期选择器助手扩展程序:

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>");
} 

日期选择器html使用:

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" })
}

所以这部分正在运行... task.StartDate返回一个值,验证正在运行。

现在是DateTime选择器,几乎相同:

日期时间选择器助手扩展程序:

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 (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>

视觉效果:

enter image description here

正如您所见,{{meeting.StartDate}}没有返回任何内容。我尝试了很多东西,但看起来拾取并没有触发绑定......而它正在使用日期选择器。奇怪...

0 个答案:

没有答案