title: JQuery DateTimePicker not validating using Unobtrusive Validation
body: <p>Using <a href="https://github.com/Eonasdan/bootstrap-datetimepicker" rel="nofollow noreferrer">this</a> Jquery DateTimePicker.  I want to be sure that the TimeStamp is entered on Submit so in my ViewModel it is a Required field, however, due to how the control is styled, the ID that is Required in the ViewModel is not set on the Input Control, rather the surrounding Div and so the control does not Validate.</p>
  
  <p>Any ides on how to fix this issue</p>
  
  <p><strong>ViewModel</strong></p>
  
  <pre><code>[Required(ErrorMessage = "RequiredField")]
  [Display(Name = "TimeStamp")]
  public DateTime TimeStamp { get; set; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label asp-for="TimeStamp" class="control-label"&gt;&lt;/label&gt;
      &lt;div class="input-group date" id="TimeStamp"&gt;
          &lt;input type="text" class="form-control" /&gt;
          &lt;span class="input-group-addon"&gt;
              &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;span asp-validation-for="TimeStamp" class="text-danger"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Working Code</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label asp-for="TimeStamp" class="control-label"&gt;&lt;/label&gt;
      &lt;div class="input-group date" id='TimeStampCal'&gt;
          @Html.TextBox("TimeStamp", null, new { @class = "form-control" })
          &lt;span class="input-group-addon"&gt;
              &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;span asp-validation-for="TimeStamp" class="text-danger"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#TimeStampCal').datetimepicker();
  </code></pre>