Bootstrap datetimepicker 日期時間選擇器 基本教學

Bootstrap datetimepicker


datetimepicker 可以提供使用者直觀(滑鼠點點)的設定日期、時間
從開發角度來說可以省掉很多開發上的麻煩(年月日時分秒)



必須檔案:
js/bootstrap-datetimepicker.js
locales/bootstrap-datetimepicker.zh-TW.js
css/bootstrap-datetimepicker.css
jquery.js
bootstrap的基本元件  css,fonts,js


 HTML基本配置:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">

datetimepicker
<input type="text" id='datetime'>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/locales/bootstrap-datetimepicker.zh-TW.js" charset="UTF-8"></script>
<script >
        $('#datetime').datetimepicker({
            autoclose:true,   
            todayBtn:true,
            todayHighlight:true,
            language:"zh-TW"
        });
</script>

結果畫面:

初始化datetimepicker的設定參數，詳細請見說明文件
可以弄得更為人性化，或將date、time功能獨立開

專案包(備份下載) 包含所需檔案、範例網頁




參考:
作者API及說明(英文)
http://www.malot.fr/bootstrap-datetimepicker/
翻譯(簡體中文)
http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

延伸:
bootstrap-datetimepicker的設定