Bootstrap 3 Datepicker v4 Docs 日期表
Bootstrap 3 Datepicker 提供的日期表,也就是點擊後,會自動彈動年、月、日的日期表供您選擇唄!^^
Bootstrap 3 Datepicker 主站及下載:https://eonasdan.github.io/bootstrap-datetimepicker/
Bootstrap 3 Datepicker v4 本小站下載:
含範例程式碼及fonts & Bootstrap 3.3.7& jQuery 1.11.3 ~ 3.2.1
使用 Bootstrap 3 Datepicker 必備條件:
範例程式碼:以 Bootstrap 3 Datepicker 的二個程式碼來展示,主要看紅色字部
份唄!(筆者網站內存放 glyphicons 的 \fonts,所以沒引入 glyphicons)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 3 Datepicker</title> <link href="css/bootstrap-datetimepicker.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script src="js/moment-with-locales.js"></script> <script src="js/bootstrap-datetimepicker.js"></script> </head> <body> <h2>Bootstrap 3 Datepicker 日期表</h2> <h3>Using Locales</h3> <p>locale 是設定國別地區顯示語言,未設是英文. 台灣繁中 zh-tw </p> <p>其他語言,詳看 <a href="https://github.com/moment/moment/tree/develop/locale" target="_blank">https://github.com/moment/moment/tree/develop/locale</a></p> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker2').datetimepicker({ locale: 'zh-tw' }); }); </script> </div> </div> <h3>No Icon (input field only):</h3> <P>沒有小圖示,直接點擊輸入欄位即會顯示日期表</P> <div class="container"> <div class="row"> <div class='col-sm-6'> <input type='text' class="form-control" id='datetimepicker4' /> </div> <script type="text/javascript"> $(function () { $('#datetimepicker4').datetimepicker({ locale: 'zh-tw' }); }); </script> </div> </div> </body> </html>
My97 DatePicker 日期選擇器
這是網上找到的,笨兔覺得相當好用,若不想用 Bootstrap 3 Datepicker 這個須引用一堆 css、js,不妨用這套,只要引入它的 WdatePicker.js
,之後在要輸入的欄位加入onClick="WdatePicker()
語法,即可輕鬆使用了!^^
My97 DatePicker 主站及下載:http://www.my97.net/
本小站下載:
My97 DatePicker v4.8
範例程式碼:主要看紅色字部
份唄!
<!doctype html> <html> <head> <meta charset="utf-8"> <title>喵喵笨兔 の 喵喵的家~遊戲天地 - Bootstrap 3 Datepicker 日期表簡介 & DatePicker 日期選擇器 ^^</title> <script language="javascript" type="text/javascript" src="DatePicker/WdatePicker.js"></script> </head> <body> <p> class="Wdate" 是出現日期小圖案</p> <input class="Wdate" type="text" onClick="WdatePicker()"> <font color=red>←點我彈出日期控制項</font> </body> </html>