javascript - 为图标实现输入标签功能

Question

我目前有一个日期选择器功能，当我单击输入部分时，会出现日期选择器，但是当我单击它旁边显示的图标时，我没有得到任何内容，我想应用相同的功能，以便我可以打开它带有图标或输入框。

我尝试将图标区域转换为输入，但我丢失了图标

 <input id="TimeReleased" name="TimeReleased" class="input-small"
     placeholder="Release Date" data-val="true"  type="text" value="@DateTime.Today.ToString("yyyy-MM-dd")" 
     data-format="yyyy-MM-dd" required/>
  <span class="add-on">
        i class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar" data-val="true"></i>
  </span>

Answer 1

如果您使用 jQuery UI Datepicker 那么将图标放入标签元素中怎么样？它可能也适用于其他日期选择器。

<label>Date</label>
<div class="input-append">
    <input id="TimeReleased" name="TimeReleased" class="input-small" 
          placeholder="Release Date" data-val="true" 
          type="text" value="@DateTime.Today.ToString("yyyy-MM-dd")" 
          data-format="yyyy-MM-dd" required/>
    <label for="TimeReleased" class="add-on"><i class="icon-calendar"></i></label>
</div>

Example stole here :)