開發思路

 - 使用HTML合理規劃元件結構
 - 為元件編寫美觀的樣式
 - 如何使用javascript獲取元件所需資料
 - 將資料與HTML結構結合
 - 使用者時間處理

原生js的操作和jquery的對比

//查詢dom元素
 document.querySelector('.ui-datepicker-wrapper');
$("xxx")[0]

//判斷是否有class
$target.classList.contains('ui-datepicker-next-btn')
$("xxx").hasClass('ui-datepicker-next-btn')

//獲取data值
$target.dataset.year
$("xxx").data("year")

//新增class
$wrapper.classList.add('ui-datepicker-wrapper-show')
$("xxx").addClass('ui-datepicker-wrapper-show');

 

日期物件的基本函式

	//獲取年份
 		getFullYear()
 	//獲取月份
 		getMonth()
 	//獲取日期
 		getDate()
 	//獲取星期幾		週一 —— 週日  [1,2,3,4,5,6,0]
 		getDay()		
 	//當月第一天的獲取
 		new Date(year,month-1,1)
 	//當月第一天的獲取
 		new Date(year,month,0)

頁面的佈局 table佈局，head為星期，tbody為日期 以td的6*7的格式設定，

核心資料的獲取 通過計算，獲取當月的第一天是周幾，最後一天是周幾，然後獲取上個月的最後一天是周幾，這樣就能獲取日曆當月的開頭和結尾的非本月的日期以及合理的位置。