本文說明datepicker 中的 parseDate formatDate
其功能是對日期解析及對日期的格式設定
一、基本JS/HTML語法
JS：
$.datepicker.parseDate("yy/mm/dd", "2008/08/08");
$.datepicker.formatDate("yy/mm/dd", new Date(2008, 8 - 1, 8));
二、基本說明
$.datepicker.formatDate( format, date, options )
$.datepicker.formatDate("日期格式", 日期物件Date, 參數設定)
$.datepicker.parseDate( format, value, options )
$.datepicker.parseDate("日期格式", "字串日期", 參數設定)
日期格式：
d - 每月的第幾天 (單位數沒有補零)
dd - 每月的第幾天 (兩位數字)
o - 一年中的第幾天 (前無補零)
oo - 一年中的第幾天 (三位數字)
D - day name short
DD - day name long
m - 月份 (前無補零)
mm - 月份 (兩位數字)
M - month name short
MM - month name long
y - 年份 (兩位數字)
yy - 年份 (四位數字)
@ - Unix 時間戳 (從 01/01/1970 開始)
'...' - 文本
'' - 單引號
其它標準日期格式:
ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
COOKIE - 'D, dd M yy'
ISO_8601 - 'yy-mm-dd'
RFC_822 - 'D, d M y'
RFC_850 - 'DD, dd-M-y'
RFC_1036 - 'D, d M y
RFC_1123 - 'D, d M yy'
RFC_2822 - 'D, d M yy'
RSS - 'D, d M y'
TIMESTAMP - '@'
W3C - 'yy-mm-dd'
參考：jqueryui api formatDate
三、程式內容
<html>
<head>
<title>jquery.datepicker 9</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({
appendText : "(西元年-月-日)",
altField : "#datepicker",
altFormat : "yy/mm/dd",
dateFormat : "yy/mm/dd"
});
$(".setDate").bind(
"click",
function() {
var myDate = $.datepicker.parseDate("yy/mm/dd", "2008/08/08");
var setDateTest = $.datepicker.formatDate("yy/mm/dd", myDate);
$("#datepicker").datepicker().val(setDateTest);
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：formatDate及parseDate方法的使用</div>
<div>
<ul>
<li><a href="#" class="setDate">設定日期為2008/08/08</a></li>
</ul>
</div>
</body>
</html>
四、執行
圖1
五、測試
Date:
說明：formatDate及parseDate方法的使用
相關參考：
- jQuery datepicker 預設基本樣式
- jQuery datepicker 月曆樣式種類
- jQuery datepicker 加入button效果 showOn buttonText
- jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly
- jQuery datepicker 設定動畫效果 showAnim showOptions duration
- jQuery datepicker 設定動畫效果樣式
- jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput
其它參考：
jQuery教學目錄
其它文章
沒有留言:
張貼留言