bootstrap 时间控件 用法,初始化控件的日期

时间:2024-04-08 11:28:14

HTML中代码

<div class="time">
    <div class="input-group">
    <span class="input-group-addon" id="Span2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
    <input type="text" style="width:180px;" class="form-control form_datetime" id="startTime" name="addtime"  placeholder="开始时间" />
    <span class="input-group-addon" id="Span1"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
    <input type="text" style="width:180px;" class="form-control form_datetime" id="endTime" name="addtime"  placeholder="结束时间" />
   </div>
   </div>

引用到的JS和css样式,需要到网上下载-bootstrap-datetimepicker-master包

<link href="../../../../script/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" rel="stylesheet" />
    <script src="../../../../script/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script src="../../../../script/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <link href="../../../../script/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

在 <script type="text/javascript">

 $('.form_datetime').datetimepicker({
                format: 'yyyy-mm-dd hh:ii:ss',
                autoclose: true,
                /* minView: "month",  *///选择日期后,不会再跳转去选择时分秒 
                language: 'zh-CN',
                dateFormat: 'yyyy-mm-dd',//日期显示格式
                timeFormat: 'HH:mm:ss',//时间显示格式
                todayBtn: 1,
                autoclose: 1,
                minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
                minuteStep: 1,//分钟间隔1分钟
            });

</script>

效果图如下:bootstrap 时间控件 用法,初始化控件的日期

给时间控件初始化一个值

<script type="text/javascript">

$(function () {

                //时间是昨天
                var day = new Date();
                day.setTime(day2.getTime() - 24 * 60 * 60 * 1000);
                var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate() + " 00:00:00";
                //时间是今天
                var day2 = new Date();
                day2.setTime(day2.getTime());
                var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate() + " 00:00:00";
                //时间是明天
                var day3 = new Date();
                day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
                var s3 = day3.getFullYear() + "-" + (day3.getMonth() + 1) + "-" + day3.getDate() + " 00:00:00";
                //$("#startTime").val(s2);
                //$("#endTime").val(s3);
            });

</script>