close

本文說明datepicker Options 中的jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

其效果會是月曆框會有功能鍵及提示訊息

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({

  showButtonPanel : true,

  closeTextType : "關閉",

  currentText : "今天yy/mm/dd",

  nextText : "下個月yy/mm",

  prevText : "上個月yy/mm",

  navigationAsDateFormat:true

});

二、基本說明

showButtonPanel : true

預設為false

設定面板顯示相關按鈕，會有二個按鈕，取得今天日期、關閉

closeTextType : "關閉"

關閉日期框，default:Done

currentText : "今天yy/mm/dd"

日期框，設定今天日期，default:Today

可以加入formatDate格式

nextText : "下個月yy/mm"

設定 Next 鏈結文字

可以加入formatDate格式

prevText : "上個月yy/mm"

設定 Prev 鏈結文字

可以加入formatDate格式

navigationAsDateFormat:true

此應用到 prevText,nextText和currentText的值中顯示，例如顯示為月份名稱。

設定則prevText,nextText和currentText，可以使用formatDate函數。

三、程式內容 

<html>
<head>
<title>jquery.datepicker 11</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $(function() {
    $("#datepicker").datepicker({
      //設定面板顯示相關按鈕，會有二個按鈕，取得今天日期、關閉
      showButtonPanel : true,
      //關閉日期框，default:Done
      closeTextType : "關閉",
      //日期框，設定今天日期，default:Today
      currentText : "今天yy/mm/dd",
   //設定 Next 鏈結文字
   nextText : "下個月yy/mm",
   //設定 Prev 鏈結文字
   prevText : "上個月yy/mm",
   //navigationAsDateFormat則formatDate函數將應用到 prevText,nextText和currentText的值中顯示，例如顯示為月份名稱。
   navigationAsDateFormat:true
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明：設定面板顯示相關按鈕</div>
</body>
</html>

四、執行

圖1

五、測試

Date: 

說明：設定面板顯示相關按鈕

相關參考：

其它參考：

jQuery教學目錄

其它文章


​
arrow
arrow
    文章標籤
    datepicker nexttext 目錄 jquery formatdate 教學 設定 關閉 script 月曆 按鈕 顯示 鏈結 日期 default content js cache 相關 div
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄