用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官網查看；