timepicker

<div class="col-md-4" style="display: -webkit-inline-box;padding-left:0px">
  <div class="input-group">
    <input type="text" id="startTime" name="startTime"
      readonly="readonly" class="form-control timepicker timepicker-default" placeholder="从">
    <span class="input-group-btn">
      <button class="btn default" type="button">
        <i class="fa fa-clock-o"></i>
      </button>
    </span>
  </div>

</div>
<div class="col-md-4">
  <div class="input-group">
    <input type="text" id="endTime" name="endTime"
      readonly="readonly" class="form-control timepicker timepicker-default" placeholder="到">
    <span class="input-group-btn">
      <button class="btn default" type="button">
        <i class="fa fa-clock-o"></i>
      </button>
    </span>
  </div>
</div>

<link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css" />
<script type="text/javascript" src="/assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

var nowTime = '<%=DateTime.Now.ToString("HH:mm")%>';
$("#startTime").val(nowTime).timepicker('setTime', nowTime);

官方文档：DateTime Picker 前提，引用bootstrap 页面效果： datepicker

<div style="display: -webkit-inline-box">
  <span class="input-group date date-picker margin-bottom-10" id="StartTime">
    <input type="text" class="form-control form-filter input-sm" readonly name="StartTime"
      placeholder="从" />
    <span class="input-group-btn" style="width: 25%">
      <button class="btn btn-sm default" type="button">
        <i class="fa fa-calendar"></i>
      </button>
    </span></span><span class="input-group date date-picker" id="EndTime">
      <input type="text" class="form-control form-filter input-sm" readonly name="EndTime"
        placeholder="到">
      <span class="input-group-btn" style="width: 25%">
        <button class="btn btn-sm default" type="button">
          <i class="fa fa-calendar"></i>
        </button>
      </span></span>
</div>

$(function () {
  $('.date-picker').datepicker({
    rtl: Metronic.isRTL(),
    autoclose: true,
    clearBtn: true, //清除按钮
    todayBtn: false, //今日按钮
    format: "yyyy-mm-dd"
  });
});

<script type="text/javascript" src="/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

官方文档：datepicker 当然前提也是bootstrap 页面效果：