自定义的日历开发笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/daxianghaoshuai/article/details/83617263

开发思路

 - 使用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的格式设置，

核心数据的获取
通过计算，获取当月的第一天是周几，最后一天是周几，然后获取上个月的最后一天是周几，这样就能获取日历当月的开头和结尾的非本月的日期以及合理的位置。