<![CDATA[
<!DOCTYPE html>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 測試</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<style>
article,aside,figure,figcaption,footer,header,hgroup,menu,nav,section {display:block;}
body {font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>
<input id="datepicker1" type="text" />
<button id="button1">設定日期為 2013-04-01</button>
<button id="button2">取得日期</button>
<button id="button3">切換 showWeek</button>
<div id="msgbox1" title="訊息"></div>
<script language="JavaScript">
$(document).ready(function(){
$.datepicker.regional['zh-TW']={
dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
dayNamesMin:["日","一","二","三","四","五","六"],
monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
prevText:"上月",
nextText:"次月",
weekHeader:"週"
};
$.datepicker.setDefaults($.datepicker.regional["zh-TW"]);
$("#datepicker1").datepicker({dateFormat:"yy-mm-dd",
onSelect: show_select
});
function show_select() {
var date=$("#datepicker1").datepicker("getDate");
$("#msgbox1").html("選取的日期 : " + date);
$("#msgbox1").dialog("open");
}
$("#button1").button();
$('#button1').click(function(){
$("#datepicker1").datepicker("setDate",new Date(2013,3,1));
});
$("#button2").button();
$('#button2').click(function(){
var date=$("#datepicker1").datepicker("getDate");
date=$.datepicker.formatDate("yy 年 M d 日", date);
$("#msgbox1").html("選取的日期 : " + date);
$("#msgbox1").dialog("open");
});
$("#button3").button();
$('#button3').click(function(){
var showWeek=$("#datepicker1").datepicker("option", "showWeek");
if (showWeek) {$("#datepicker1").datepicker("option", "showWeek", false);showWeek=false;}
else {$("#datepicker1").datepicker("option", "showWeek", true);showWeek=true;}
$("#msgbox1").html("已將 showWeek 選項設為 : " + showWeek);
$("#msgbox1").dialog("open");
});
$("#msgbox1").dialog({autoOpen: false,
buttons: {"確定": function() {$(this).dialog("close");}}
});
});
</script>
</body>
</html>]]>