主要使用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官網查看;