bootstrap中datetimepicker时间插件使用

来源：互联网发布：淘宝开店平板编辑：程序博客网时间：2024/05/22 17:08
<head><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" /><link href="../bootstrap/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /></head><body><div class="box-tools " style="padding-right:60px;margin-top:10px">    <tr>        <td><span style="font-weight:bold;font-size:15px;">开始时间：<input type="text" value="2017-01-01 00:00" id="starttime" style="text-align:center;"/>  --  </span>        <span style="font-weight:bold;font-size:15px;">结束时间：<input type="text"  id="endtime" style="text-align:center;"/></span>                        </td>                        </tr>        <button id="btnSearch" class="btn btn-info btn-sm" style="margin-left:10px" onclick="OnSearch()">查询</button></div><script src="../bootstrap/js/jQuery/jquery-2.2.3.min.js"></script><script src="../bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script><script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>//中文包<script>$(document).ready(function(){//时间查询设置    $('#starttime').datetimepicker({    format: 'yyyy-mm-dd hh:ii',    language: 'zh-CN',//中文，需要引用zh-CN.js包    pickDate: true,            pickTime: true,            hourStep: 1,            minuteStep: 5,//设置最小可选分            secondStep: 30,            inputMask: true,            todayBtn: false,//today按钮            todayHighlight: true,//今天在日历上高亮            autoclose: true,//选择好时间后自动关闭                }).on('changeDate',function(ev){//设置不能选择开始时间之前的时间    var starttime=$("#starttime").val();    $("#endtime").datetimepicker('setStartDate',starttime);    $("#starttime").datetimepicker('hide');    });    //设置结束时间默认为当前系统时间    if($('#endtime').val()==null||$('#endtime').val()==''){    var dt = new Date();    var m = dt.getMonth() + 1;    var t = dt.getFullYear() + "-" + m + "-"         + dt.getDate() + " " + dt.getHours() + ":"         + dt.getMinutes();         $('#endtime').val(t);    }    $('#endtime').datetimepicker({    format: 'yyyy-mm-dd hh:ii',    language: 'zh-CN',    pickDate: true,            pickTime: true,            hourStep: 1,            minuteStep: 5,            secondStep: 30,            inputMask: true,            todayBtn: false,            todayHighlight: true,            autoclose: true,                        }).on('changeDate',function(ev){//设置不能选择结束时间之后的时间     var starttime=$("#starttime").val();     var endtime=$("#endtime").val();     $("#starttime").datetimepicker('setEndDate',endtime);     $("#endtime").datetimepicker('hide');    });})</script></body>
阅读全文
0 0