Bootstrap 时间控件timepicker与datepicker

timepicker

 1           <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>

1　　　 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
2   　 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css" />
3  　　<script type="text/javascript" src="/assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
4     <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
5     <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=" 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=" 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