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
页面效果: