1. 程式人生 > >bootstrap的日期時間外掛

bootstrap的日期時間外掛

 

效果圖展示:

1)html程式碼

<div class="row">
    <div class="col-xs-2">
        <label class="control-label">釋出截止日期:</label>
    </div>
    <div class="col-xs-4 updateP1">
        <input type="text" id="abortDate" name="abortDate" class="form-control" value="">
    </div>
</div>

2)需要依賴static/bootstrap-3.3.7-dist/datepicker

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static
/bootstrap-3.3.7-dist/datepicker/css/bootstrap-datetimepicker.min.css" />

<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/datepicker
/js/bootstrap-datetimepicker.min.js"></script>

<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/datepicker
/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

3)js呼叫datetimepicker方法

<script> 
    //時間函式
    function getCurrDate(){
        var d = new Date();
        return d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "
        +d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
    }
    //入口函式
    $(function(){
        //時間外掛
        $("#abortDate").datetimepicker({
           language:"zh-CN",//漢化
           todayBtn:1,//返回當前時間的button
           format:"yyyy-mm-dd hh:ii:ss",//顯示時間的格式
            //minView:"month"//只顯示月曆
        });
        //時間val值,獲取當前時間
        $("#abortDate").val(getCurrDate());
    });
</script> 

就可以啦!