本文說明datepicker Options 中的showOn、buttonText

其效果會有一個button按鈕

一、基本JS/HTML語法

JS:

  $(function() {

$("#datepicker").datepicker({

  showOn : "button",

  //設定button title and alt text

  buttonText:"生日"

});

  });

HTML:

Date: <input type="text" id="datepicker">

二、基本說明

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

此物件id為datepicker，設定為datepicker的物件。

(此物件本文設定為input)

showOn:

可設定focus 、button、 both 。

預設不設定為focus

focus:當滑鼠點到date picker則跳出日曆框。

button:當按下按鈕button時則跳出日曆框。

both: 二則都可 popup date box.

 本文設定為button。

buttonText:

設定button文字

三、程式內容 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery.datepicker 3</title>
<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>
<style>
.datag, .datetest {
  position: relative;
}
.ui-datepicker-trigger {
  position: absolute;
}
</style>
<script>
  $(function() {
    $("#datepicker").datepicker({
     //default為focus，可設定focus 、button、 both 。
     //focus 當 focus到 date picker 則 popup date box.
     //button 當按下按鈕時則 popup date box.
     //both 二則都可 popup date box.
      showOn : "button",
      //設定button title and alt text
      buttonText:"生日"
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker">
    </p>
  </div>
  <div>說明：加入button按鈕</div>
</body>
</html>

四、執行

圖1

五、測試

註：本文設定為button，故要按button才會有日曆喔!

Date: 

相關參考：

其它參考：

jQuery教學目錄

其它文章


​
arrow
arrow
    文章標籤
    datepicker lt 目錄 button gt 教學 buttontext jquery showon date focus script popup datetest both 按鈕 picker box 日曆 input
    全站熱搜

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

    E-mail轉寄