程式開發學習之路

本文說明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