網頁開發(4) JQuery Datepicker 日期選擇器

這次要記錄的是 JQuery 中的 Datepicker

其實 Datepicker 是 JQuery UI 裡的一個部件

以下連結可以載 JQuery UI

http://jqueryui.com/download/

載完後就 Link 到自己的檔案裡就可以使用

    <link rel="stylesheet" type="text/css" href="jQuery/ui.css"/>
    <script src="jQuery/jquery.js"></script>
    <script src="jQuery/jquery-ui.js"></script>

 Html : 

    <input type="text" id="date" />

 Javascript : 

    $( "#date" ).datepicker();

就大功告成

以下為一些實用 Datepicker 參數

$('#date').datepicker({
    showOn: 'both',              // 顯示按鈕圖示
    changeMonth: true,
    changeYear: true,
    dateFormat:'yy-mm-dd',       // 預設為 mm/dd/yy
    firstDay: 1,                 // 這裡 first day 指的是一星期的第一天，1 = 星期一
    minDate : "+1d",             // 限制最早日期
    maxDate : "+300d",           // 限制最晚日期
    buttonImage: 'calendar.gif'  // 按鈕圖示
});

參考網站
http://www.runoob.com/jqueryui/jqueryui-use.html
https://blog.wu-boy.com/2008/04/jquery筆記-好用的日期函式/
http://pclevinblog.pixnet.net/blog/post/381097399-jquery-datepicker-設定限制日期最小最大-mindate-max

Read More