本文說明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教學目錄
其它文章
沒有留言:
張貼留言