用bootstrap日期選擇小插件實現日期選擇

主要使用bootstrap-datetimepicker小插件實現的日期選擇;

1、首先需要引入的js和css文件:

css:

bootstrap.min.css(含有bootstrap 所有css,min.css爲壓縮版)

bootstrap-datetimepicker.min.css(日期控件所需的樣式表)

js:

jquery-min.js(其他版本的jquery也可以)

bootstrap.min.js(含有bootstrap 所有js)

bootstrap-datetimepicker.js(日期控件所需的js)

bootstrap-datetimepicker.zh-CN.js(日期控件中文文件)

說明:引入js時,jquery-min.js必須在bootstrap.min.js之前。後者依託前者。

           可以到 git clone git://github.com/smalot/bootstrap-datetimepicker.git 下載以上文件;

2、主要引用如下代碼:

//此路徑是我本機路徑,此處需要用自己文件的目錄,引用格式如下:
<script src="../../vendor//jquery.min.js.js" type="text/javascript"></script>
<script src="../../vendor//bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="../../vendor//bootstrap.min.js.js" type="text/javascript"></script>
<link href="../../vendor//bootstrap.min.css.css" rel="stylesheet" type="text/css"/>
<link href="../../vendor//bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/>
<script src="../../vendor/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
js代碼

<script>
        $('#datetimeStart').datetimepicker({
        format: 'yyyy-mm-dd',  //時間格式,如:yyyy:mm:dd等
        minView:'month',
        language: 'zh-CN',
        autoclose:true,
       // startDate:new Date(),  //此設置主要爲選擇日期是否從當前時間開始,即不可以選擇以前的時間
    });
</script>

 

html代碼:

//此處有一點需要注意,如果不採用calss="form-control"樣式,可能會出現選擇日期的左右箭頭是空白的

<input id="datetimeStart" class="form-control" name="date" style="width:25%"> 


 想了解更多可以去bootstrap官網查看;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章