程式開發學習之路

本文說明datepicker 中的setDefaults iso8601Week

其設定參數及一年中的第幾週

一、基本JS/HTML語法

JS：

$.datepicker.setDefaults({

dateFormat : "(yy--mm--dd)"

});

$.datepicker.iso8601Week( $.datepicker.parseDate("yy/mm/dd", "2008/08/08"));

本文說明 datepicker 事件 onChangeMonthYear

當日曆移動到新的月份或年份時，觸法此事件

一、基本JS/HTML語法

JS：

    $("#datepicker").datepicker({

      onChangeMonthYear : fun1

    });

二、基本說明

本文說明datepicker 事件 onClose

其事件會是關閉日期框要做什麼事。

一、基本JS/HTML語法

JS：

    $("#datepicker").datepicker({

      onClose : fun1

    });

二、基本說明

本文說明datepicker 事件 onSelect

其效果選擇日期後要多做什麼動作

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({

  onSelect : fun1

});

二、基本說明

本文說明datepicker 事件 beforeShow beforeShowDay

其效果顯示日曆框前要做的事

一、基本JS/HTML語法

JS：

 $("#datepicker").datepicker({

           beforeShow : fun1,

           beforeShowDay : fun2

         });

本文說明datepicker Methods 中的dialog widget

其效果另開日曆框及取得日曆框物件

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker("dialog");

$("#datepicker").datepicker("widget");

二、基本說明

另開日曆框

本文說明 datepicker Methods 中的 destroy isDisabled

其銷毀及禁用的方法

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker("destroy");

$("#datepicker").datepicker("isDisabled")

$("#datepicker").datepicker("option", "disabled", true);

二、基本說明

本文說明jQuery datepicker Methods 中的 show hide refresh 方法

其是顯示/關閉/重新整理月曆框

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker("show");

$("#datepicker").datepicker("hide");

$("#datepicker").datepicker("refresh");

二、基本說明

本文說明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 Options 中的 showWeek weekHeader calculateWeek

其設定周數

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({
    showWeek : true,
    weekHeader:"W",
    calculateWeek:myWeekCalc
  });
        

二、基本說明

showWeek : true

default:false

是否顯示周數

本文說明datepicker Options 中的 yearRange yearSuffix shortYearCutoff

其設定年份範圍跟世紀範圍設定

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({
      changeYear : true,
      yearRange : "1980:2030",
      yearSuffix : "年",
      dateFormat : "y/mm/dd",
      shortYearCutoff :"+10"
    });
        

二、基本說明

yearRange : "1980:2030"

yearRange 控制年份的下拉列表中顯示的年份數量，

可以是相對當前年(-nn:+nn)，也可以是絕對值 (-nnnn:+nnnn)

本文說明datepicker Options 中的 firstDay defaultDate

其設定月曆框的預設日期

一、基本JS/HTML語法

JS:

 //16-jQuery datepicker 設定 firstDay defaultDate
  $("#datepicker").datepicker({
    firstDay : 1,
    defaultDate : "-7d"
  });
        

二、基本說明

firstDay : 1

設置一週中的第一天。星期天為0，星期一為1，以此類推。

本文設定日曆第一格是星期一

本文說明datepicker Options 中的 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent

其效果會是顯示月曆框有效果

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({

      showOtherMonths : true,

     selectOtherMonths :true,

      stepMonths : 1,

本文說明datepicker Options 中的numberOfMonths showCurrentAtPos

其設定多個月曆框

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({

        numberOfMonths : [ 2, 3 ],

        showCurrentAtPos : 1

    });

本文說明datepicker Options 中的dayNames dayNamesShort dayNamesMin monthNames monthNamesShort

其效果是會改變顯示文字

一、基本JS/HTML語法

JS：

    $("#datepicker").datepicker({

          dayNames : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],

          dayNamesShort : [ "日", "一", "二", "三", "四", "五", "六" ],

          dayNamesMin : [ "日", "一", "二", "三", "四", "五", "六" ],

本文說明datepicker Options 中的jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat

其效果會是月曆框會有功能鍵及提示訊息

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({

  showButtonPanel : true,

  closeTextType : "關閉",

  currentText : "今天yy/mm/dd",

本文說明datepicker Options 中的changeMonth changeYear showMonthAfterYear

其效果會有下拉式選單

一、基本JS/HTML語法

JS：

$("#datepicker").datepicker({

      changeMonth : true,

      changeYear : true,

      showMonthAfterYear : true

本文說明datepicker Options 中的 appendText altField altFormat autoSize dateFormat constrainInput

其是顯示月曆框的顯示格式、顯示地方、輸入框大小及格式限制

一、基本JS/HTML語法

JS:

  $(function() {

$("#datepicker").datepicker({

  appendText : "(西元年-月-日)",

  altField : "#datepicker",