程式開發學習之路

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

jQuery datepicker 事件 onSelect

jQuery datepicker 事件 onClose

jQuery datepicker 事件 onChangeMonthYear

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(60)

個人分類：jQuery Datepicker

1月 17 週日 201619:25
jQuery datepicker 事件 onChangeMonthYear

本文說明 datepicker 事件 onChangeMonthYear
當日曆移動到新的月份或年份時，觸法此事件
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker({
onChangeMonthYear : fun1
});
二、基本說明
onChangeMonthYear : fun1
default : null 不多做動作
當日曆移動到新的月份或年份時，叫用此方法。
function(Integer year,Integer month,Object inst)
fun1：當日曆移動到新的月份或年份時，叫用此方法，顯示訊息。
function fun1(year, month, inst) {
  $("#showDateBox").append("onChangeMonthYear......"+year+"/"+month);
  console.log("year", year);
  console.log("month", month);
  console.log("inst", inst);
}
三、程式內容
<html>
<head>
<title>jquery.datepicker 26</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//26-jQuery datepicker 事件 onChangeMonthYear
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd",
//當日曆移動到新的月份或年份時，叫用此方法
//default 不多做動作
onChangeMonthYear : fun1
});
//function(Integer year,Integer month,Object inst)
//當日曆移動到新的月份或年份時，叫用此方法
function fun1(year, month, inst) {
$("#showDateBox").append("onChangeMonthYear......"+year+"/"+month);
console.log("year", year);
console.log("month", month);
console.log("inst", inst);
}
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker 事件 onChangeMonthYear </div>
<br>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker 事件 onChangeMonthYear

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

jQuery datepicker 事件 onSelect

jQuery datepicker 事件 onClose

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(225)

個人分類：jQuery Datepicker

1月 17 週日 201619:24
jQuery datepicker 事件 onClose

本文說明datepicker 事件 onClose
其事件會是關閉日期框要做什麼事。
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker({
onClose : fun1
});
二、基本說明
onClose : fun1
default : null 不多做動作
function(String dateText,Object inst)
關閉日曆框後要多做什麼動作。
fun1為加入判斷日期為空值則提示訊息。
function fun1(dateText, inst) {
  console.log("onClose");
  console.log("dateText", dateText);
  console.log("inst", inst);
  if (dateText == "") {
$("#showDateBox").append("請選擇日期......");
  }
}
三、程式內容
<html>
<head>
<title>jquery.datepicker 25</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//25-jQuery datepicker 事件 onClose
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd",
//關閉日曆框後要多做什麼動作
//default 不多做動作
onClose : fun1
});
//function(String dateText,Object inst)
//加入判斷日期為空值則提示訊息
function fun1(dateText, inst) {
console.log("onClose");
console.log("dateText", dateText);
console.log("inst", inst);
if (dateText == "") {
$("#showDateBox").append("請選擇日期......");
}
}
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker 事件 onClose </div>
<br>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker 事件 onClose

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(1,924)

個人分類：jQuery Datepicker

1月 17 週日 201619:23
jQuery datepicker 事件 onSelect

本文說明datepicker 事件 onSelect
其效果選擇日期後要多做什麼動作
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker({
  onSelect : fun1
});
二、基本說明
onSelect : fun1
default : null 不多做動作
function(String dateText,Object inst)
選擇日期後要多做什麼動作
var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
//function(String dateText,Object inst)
function fun1(dateText, inst) {
  console.log("onSelect");
  console.log("dateText",dateText);
  console.log("inst",inst);
  if(array.indexOf(dateText) > -1){
$("#showDateBox").append("選中日期......"+dateText);
  }
}
三、程式內容
<html>
<head>
<title>jquery.datepicker 24</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() {
//24-jQuery datepicker 事件 onSelect
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd",
//選擇日期後要多做什麼動作
//default 不多做動作
onSelect : fun1
});
var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
//function(String dateText,Object inst)
function fun1(dateText, inst) {
console.log("onSelect");
console.log("dateText",dateText);
console.log("inst",inst);
if(array.indexOf(dateText) > -1){
$("#showDateBox").append("選中日期......"+dateText);
}
}
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker 事件 onSelect 。<br> 選中2016/01/14、2016/01/15、2016/01/16 會提示訊息</div>
<br>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker 事件 onSelect

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(1,313)

個人分類：jQuery Datepicker

1月 17 週日 201619:21
jQuery datepicker 事件 beforeShow beforeShowDay

本文說明datepicker 事件 beforeShow beforeShowDay
其效果顯示日曆框前要做的事
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker({
beforeShow : fun1,
beforeShowDay : fun2
});
二、基本說明
beforeShow : fun1
Default: null
function(Element imput,Object inst)
顯示日曆框前要做的事，對input 物件操作。
fun1為自訂方法。
function fun1(input, inst) {
  console.log("beforeShow");
  console.log("input",input);
  console.log("inst",inst);
}
beforeShowDay : fun2
Default: null
function (Date date)
顯示日曆框前要做的事，對日期操作。
fun2為自訂方法。
var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
//本方法效果限制不可選的日期。(array中為不可選日期)
function fun2(date) {
  var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
  console.log("beforeShowDay", string);
  return [ array.indexOf(string) == -1 ]
}
三、程式內容
<html>
<head>
<title>jquery.datepicker 23</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//23-jQuery datepicker 事件 beforeShow beforeShowDay
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd",
//顯示日曆框前要做的事，對input 物件操作
beforeShow : fun1,
//顯示日曆框前要做的事，對日期操作
beforeShowDay : fun2
});
//function(Element imput,Object inst)
//Element input
//Object datepicker
function fun1(input, inst) {
$("#showDateBox").append("beforeShow");
$("#showDateBox").append("input"+input);
$("#showDateBox").append("inst"+inst);
console.log("beforeShow");
console.log("input",input);
console.log("inst",inst);
}
var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
//本方法效果限制不可選的日期。(array中為不可選日期)
//function (Date date)
function fun2(date) {
var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
console.log("beforeShowDay", string);
return [ array.indexOf(string) == -1 ]
}
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker 事件 beforeShow beforeShowDay </div>
<br>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker 事件 beforeShow beforeShowDay

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(222)

個人分類：jQuery Datepicker

1月 17 週日 201619:20
jQuery datepicker Methods dialog widget

本文說明datepicker Methods 中的dialog widget
其效果另開日曆框及取得日曆框物件
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker("dialog");
$("#datepicker").datepicker("widget");
二、基本說明
另開日曆框
$("#datepicker").datepicker("dialog");
取得 datepicker 物件
$("#datepicker").datepicker("widget");
三、程式內容
<html>
<head>
<title>jquery.datepicker 22</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() {
//22-jQuery datepicker Methods dialog widget
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd"
});
//dialog(date(必要),onSelect(不一定要給),options(不一定要給),pos(不一定要給))
//.datepicker("dialog","日期","選擇日期後的動作","option參數","顯示位置")
$(".dialogDate").bind("click", function() {
$("#datepicker").datepicker("dialog", "2016/01/08", function() {
console.log("dialog text.");
}, {
dateFormat : "yy/mm/dd"
}, [ event.pageX, event.pageY ]);
});
//回傳datepicker 物件
$(".widgetDate").bind("click", function() {
var widgetObj = $("#datepicker").datepicker("widget");
console.log("widgetObj", widgetObj);
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker Methods dialog widget </div>
<br>
<div>
<ul>
<li><a href="javascript:void(0)" class="dialogDate">設定dialog</a></li>
<li><a href="javascript:void(0)" class="widgetDate">widget</a></li>
</ul>
</div>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker Methods dialog widget

設定dialog

widget

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(70)

個人分類：jQuery Datepicker

1月 17 週日 201619:19
jQuery datepicker Methods destroy isDisabled

本文說明 datepicker Methods 中的 destroy isDisabled
其銷毀及禁用的方法
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker("destroy");
$("#datepicker").datepicker("isDisabled")
$("#datepicker").datepicker("option", "disabled", true);
二、基本說明
銷毀 datepicker
$("#datepicker").datepicker("destroy");
設定禁用 datepicker
$("#datepicker").datepicker("option", "disabled", true);
是否有禁用 datepicker
$("#datepicker").datepicker("isDisabled")
三、程式內容
<html>
<head>
<title>jquery.datepicker 21</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//21-jQuery datepicker Methods destroy isDisabled option
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd"//,
//disabled:true
});
$(".destroyDate").bind("click", function() {
$("#datepicker").datepicker("destroy");
});
$(".isDisabledDate").bind(
"click",
function() {
$("#showDateBox").append(
"是否被停用:" + $("#datepicker").datepicker("isDisabled"));
});
$(".setDisabledDate").bind("click", function() {
$("#datepicker").datepicker("option", "disabled", true);
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker Methods destroy isDisabled option </div>
<br>
<div>
<ul>
<li><a href="javascript:void(0)" class="destroyDate">設定destroy日期</a></li>
<li><a href="javascript:void(0)" class="isDisabledDate">isDisabled</a></li>
<li><a href="javascript:void(0)" class="setDisabledDate">設定Disabled</a></li>
</ul>
</div>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker Methods destroy isDisabled option

設定destroy日期

isDisabled

設定Disabled

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(501)

個人分類：jQuery Datepicker

1月 17 週日 201619:18
jQuery datepicker Methods show hide refresh

本文說明jQuery datepicker Methods 中的 show hide refresh 方法
其是顯示/關閉/重新整理月曆框
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker("show");
$("#datepicker").datepicker("hide");
$("#datepicker").datepicker("refresh");
二、基本說明
顯示日曆框
$("#datepicker").datepicker("show");
關閉日曆框
$("#datepicker").datepicker("hide");
重新整理日曆框
$("#datepicker").datepicker("refresh");
三、程式內容
<html>
<head>
<title>jquery.datepicker 20</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//20-jQuery datepicker Methods show hide refresh
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd"
});
$(".showDate").bind("click", function() {
$("#datepicker").datepicker("show");
});
$(".hideDate").bind("click", function() {
$("#datepicker").datepicker("hide");
});
$(".refreshDate").bind("click", function() {
$("#datepicker").datepicker("refresh");
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker Methods show hide refresh</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>
<ul>
<li><a href="javascript:void(0)" class="showDate">設定show日期</a></li>
<li><a href="javascript:void(0)" class="hideDate">設定hide日期</a></li>
<li><a href="javascript:void(0)" class="refreshDate">設定refresh日期</a></li>
</ul>
</div>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker Methods show hide refresh

設定show日期

設定hide日期

設定refresh日期

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(502)

個人分類：jQuery Datepicker

1月 17 週日 201619:16
jQuery datepicker Methods getDate setDate

本文說明datepicker Methods 中的 getDate setDate
其效果取得日期及設定日期
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker("setDate",$.datepicker.parseDate("yy/mm/dd", "2008/08/08"));
$("#datepicker").datepicker("getDate")
二、基本說明
setDate 設定日期
$("#datepicker").datepicker("setDate",Date 物件);
getDate 取得日期
$("#datepicker").datepicker("getDate")
三、程式內容
<html>
<head>
<title>jquery.datepicker 19</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//19-jQuery datepicker Methods getDate setDate
$("#datepicker").datepicker({
//設定日期格式
dateFormat : "yy/mm/dd"
});
$(".setDate").bind("click", function() {
$("#datepicker").datepicker("setDate",$.datepicker.parseDate("yy/mm/dd", "2008/08/08"));
$("#showDateBox").append($("#datepicker").datepicker("getDate"));
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker Methods getDate setDate</div>
<div>
<ul>
<li><a href="javascript:void(0)" class="setDate">設定日期為2008/08/08</a></li>
</ul>
</div>
<div id="showDateBox"></div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker Methods getDate setDate

設定日期為2008/08/08

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput

jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear

jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos

jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff

jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

其它參考：
jQuery教學目錄
其它文章

PG Levin Li 發表在痞客邦留言(0) 人氣(5,140)

個人分類：jQuery Datepicker

1月 17 週日 201619:15
jQuery datepicker 設定周數 showWeek weekHeader calculateWeek

本文說明datepicker Options 中的 showWeek weekHeader calculateWeek
其設定周數
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker({
showWeek : true,
weekHeader:"W",
calculateWeek:myWeekCalc
});
二、基本說明
showWeek : true
default:false
是否顯示周數
weekHeader:"W"
default""wk"
顯示周數的標題
calculateWeek:myWeekCalc
default datepicker.iso8601Week
自訂計算周數的方法
function myWeekCalc(date) {
var checkDate = new Date(date.getTime());
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay()));
var time = checkDate.getTime();
//設定1月1日
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
}
三、程式內容
<html>
<head>
<title>jquery.datepicker 18</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
//18-jQuery datepicker 設定 showWeek weekHeader calculateWeek
$("#datepicker").datepicker({
//是否顯示周數
//default:false
showWeek : true,
//顯示周數的標題
//default""wk"
weekHeader:"W",
//自訂計算周數的方法，
//default datepicker.iso8601Week
calculateWeek:myWeekCalc
});
function myWeekCalc(date) {
var checkDate = new Date(date.getTime());
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay()));
var time = checkDate.getTime();
//設定1月1日
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
}
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：jQuery datepicker 設定 showWeek weekHeader calculateWeek</div>
</body>
</html>
四、執行
圖1

五、測試

Date:

說明：jQuery datepicker 設定 showWeek weekHeader calculateWeek

相關參考：

jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly

jQuery datepicker 設定動畫效果 showAnim showOptions duration

jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput