title: @Html.DatePickerFor with bootstrap datepicker using TagBuilder
body: <p>So I am trying to add an extension for the bootstrap date picker:</p>
  
  <pre><code> public static MvcHtmlString DatePickerFor&lt;TModel, TValue&gt;(this HtmlHelper&lt;TModel&gt; htmlHelper, Expression&lt;Func&lt;TModel, TValue&gt;&gt; expression)
      {
          var propertyName = ExpressionHelper.GetExpressionText(expression);
          var controlGroupWrapper = new TagBuilder("div");
          controlGroupWrapper.AddCssClass("control-group");
  
          controlGroupWrapper.InnerHtml += htmlHelper.LabelFor(expression, new Dictionary&lt;string, object&gt; { { "class", "control-label" } }).ToHtmlString();
  
          var controlWrapper = new TagBuilder("div");
          controlWrapper.AddCssClass("controls");
  
          var datePicker = new TagBuilder("div");
          datePicker.AddCssClass("input-append date datepicker");
          datePicker.MergeAttribute("data-date-format", "dd/mm/yyy");
  
          var addOnWrapper = new TagBuilder("span");
          addOnWrapper.AddCssClass("add-on");
  
          var iconThWrapper = new TagBuilder("i");
          iconThWrapper.AddCssClass("icon-th");
  
          addOnWrapper.InnerHtml += iconThWrapper.ToString(TagRenderMode.Normal);
  
  
  
          var value = GetPropValue(htmlHelper.ViewData.Model, propertyName);
          var innerHtml = htmlHelper.EditorFor(expression).ToHtmlString();
          innerHtml += addOnWrapper.ToString(TagRenderMode.Normal);
  
          var datepickerInnerHtml = datePicker.ToString(TagRenderMode.Normal);
          datepickerInnerHtml += innerHtml;
  
          controlWrapper.InnerHtml += datepickerInnerHtml;
  
          controlGroupWrapper.InnerHtml += controlWrapper.ToString(TagRenderMode.Normal);
  
  
  
          return MvcHtmlString.Create(controlGroupWrapper.ToString(TagRenderMode.Normal));
  
      }
  </code></pre>
  
  <p>That is what i have and what I need is:</p>
  
  <pre><code> &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="Date"&gt;@Model.DisplayName&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;div class="input-append date datepicker" data-date-format="dd/mm/yyyy"&gt;
                    &lt;input name="@Model.Name" value="@Model.Value" class="span2" type="text"/&gt;
                      &lt;span class="add-on"&gt;&lt;i class="icon-th"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>What I actually get on screen is:</p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;label class="control-label" for="StartDate_Value"&gt;Value&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;div class="input-append date datepicker" data-date-format="dd/mm/yyy"&gt;
          &lt;div class="datepicker datepicker-inline" style="display: block;"&gt;
              &lt;div class="datepicker-days" style="display: block;"&gt;
                  &lt;table class=" table-condensed"&gt;
                      &lt;thead&gt;
              div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input class="text-box single-line" id="StartDate_Value" name="StartDate.Value" type="text" value=""&gt;
      &lt;span class="add-on"&gt;
          &lt;i class="icon-th"&gt;&lt;/i&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the stuff is not lining up and I am getting the actual datepicker div on screen instead of inserted via JS. Anyone got any ideas on what I am doing wrong?</p>