本文說明datepicker Options 中的 appendText altField altFormat autoSize dateFormat constrainInput
其是顯示月曆框的顯示格式、顯示地方、輸入框大小及格式限制
一、基本JS/HTML語法
JS:
$(function() {
$("#datepicker").datepicker({
appendText : "(西元年-月-日)",
altField : "#datepicker",
altFormat : "yy-mm-dd",
autoSize : true,
dateFormat:"yy-mm-dd",
constrainInput : false
});
});
HTML:
Date: <input type="text" id="datepicker">
二、基本說明
appendText :"(西元年-月-日)"
在輸入框後，加入文字串，本文設定(西元年-月-日)
也可以設定HTML，例："<h5>(西元年-月-日)</h5>"
altField : "#datepicker"
設定顯示日期的欄位，本文設定ID為datepicker
也可以用class名稱，例".datepicker"
altFormat : "yy-mm-dd"
設定顯示格式，需配合 altField
yy - 年份 (顯示四位數字)
mm - 月份 (顯示二位數字)
dd - 日數 (顯示二位數子)
autoSize : true
設定自動調整顯示框的大小
dateFormat:"yy-mm-dd"
設定日期格式
constrainInput : false
約束輸入格式 配合dateFormat,
預設是true，true為約束(約束輸入框不可輸入dateFormat以外的符號)。
false為不約束
三、程式內容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery.datepicker 8</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>
<style>
.datag, .datetest {
position: relative;
}
.ui-datepicker-trigger {
position: absolute;
}
</style>
<script>
$(function() {
$("#datepicker").datepicker({
//在輸入框後，加入文字串
appendText : "(西元年-月-日)",//"<h5>(西元年-月-日)</h5>"
//設定顯示欄位
altField : "#datepicker",
//設定顯示格式，需配合 altField
//yy - 年份 (四位數字)
//mm - 月份(二位數字)
//dd - 日數(二位數子)
altFormat : "yy-mm-dd",
//設定顯示框大小
autoSize : true,
//設定日期格式
dateFormat:"yy-mm-dd",
//約束輸入格式 配合dateFormat,true為約束 預設也是true
constrainInput : false
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker">
</p>
</div>
<div>說明：顯示及格式相關.</div>
</body>
</html>
四、執行
圖1 文字顯示
圖2 constrainInput : false 所以我可以輸入其它符號
如果constrainInput : true 你就不能輸入其它符號了，只能輸入dateFormat設定的符號
五、測試
說明：未設定appendText altField altFormat autoSize dateFormat constrainInput.
Date:
說明：已設定顯示及格式相關.
Date:
相關參考：
- jQuery datepicker 預設基本樣式
- jQuery datepicker 月曆樣式種類
- jQuery datepicker 加入button效果 showOn buttonText
- jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly
- jQuery datepicker 設定動畫效果 showAnim showOptions duration
- jQuery datepicker 設定動畫效果樣式
其它參考：
jQuery教學目錄
其它文章
沒有留言:
張貼留言