本文說明datepicker Options 中的buttonImage、buttonImageOnly
其效果會加入月曆icon小圖。
相關Options為：showOn、buttonText
參考：
一、基本JS/HTML語法
JS:
$(function() {
$("#datepicker").datepicker({
showOn : "both",
buttonImage : "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly : true,
buttonText:"生日"
});
});
HTML:
Date: <input type="text" id="datepicker">
二、基本說明
buttonImage：
設定button 圖片url
本文使用jqueryui裡的圖
URL：https://jqueryui.com/resources/demos/datepicker/images/calendar.gif
buttonImageOnly：
預設為false，會產出button。配合showOn為button。
為true，則設定不顯示button只顯示image圖。
三、程式內容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery.datepicker 4</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 : "both",
//設定button 圖片url
buttonImage : "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
//設定button image 如果只有圖則為true,
//false則為會產出button
buttonImageOnly : true,
//設定button title and alt text
buttonText:"生日"
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker">
</p>
</div>
<div>說明：加入月曆icon小圖</div>
</body>
</html>
四、執行
圖1
圖2 如果有設定buttonText，滑鼠移到圖上面會顯示你設定的文字。
五、測試
註：本文設定showOn : "both",所以點圖跟imput都會有日曆喔!!
Date:
jqueryui datepicker demo
其它參考：
jQuery教學目錄
其它文章
沒有留言:
張貼留言