2018年10月1日 星期一

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

這次要記錄的是 JQuery 中的 Datepicker
其實 DatepickerJQuery UI 裡的一個部件

以下連結可以載 JQuery UI

載完後就 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

0 意見:

張貼留言

Popular Posts