DatePicker组件开发_学习笔记

首页免费课 DatePicker组件开发笔记

DatePicker组件开发

                
                TooooBug
            
                    查看讲师更多课程 
                    TooooBug讲师的其他课程
                
腾讯大牛亲授 Web前后端漏洞分析与防御技巧
实战·中级·1171

                                                                                                                                    ￥199.00
                                            
系统讲解CSS，工作应用+面试一步搞定
实战·初级·2519

                                                                                                                                    ￥59.00
                                            
                难度中级
            
                时长 1小时30分
            
                学习人数
            
综合评分9.83
                            69人评价
                        查看评价
                                10.0
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.8
                                逻辑清晰

最热最新

aSuncat

一、日历制作过程
1、静态结构编写。
2、日历数据。
3、数据渲染。
4、事件处理。

查看全部

0 采集收起来源：课程介绍
2018-07-25
八神光 06:34

当月第一天，最后一天

查看全部

0 采集收起来源：前置知识
2018-07-09
慕田峪8142436

cursor:pointer;是鼠标指针移上去显示手形状

查看全部

0 采集收起来源：样式编写
2018-04-23
qq_昨夜闲谈梦落花_0

datepicker.init = function (input, year, month) { var html = datepicker.buildUi(year, month), $wrapper = document.createElement("div"); $wrapper.className = "ui-datepicker-wrapper"; $wrapper.innerHTML = html; document.body.appendChild($wrapper); var $input = document.querySelector(input), isOpen = false; $input.addEventListener("click",function () { if(isOpen){ $wrapper.classList.remove("ui-datepicker-wrapper-show"); isOpen = false; }else { $wrapper.classList.add("ui-datepicker-wrapper-show"); var left = $input.offsetLeft, top = $input.offsetTop, height = $input.offsetHeight; $wrapper.style.top = top +height + 2 + "px"; $wrapper.style.left = left + "px"; isOpen = true; } },false);

查看全部

0 采集收起来源：展开收起
2018-03-22
qq_昨夜闲谈梦落花_0

(function () { var datepicker = {}; datepicker.getMonthDate = function (year, month) { var ret = []; //如果没有传入年月，则获取当前年月 if(!year || !month){ var today = new Date(); year = today.getFullYear(); month = today.getMonth() + 1; } //获取本月的第一天 var firstDay = new Date(year, month - 1, 1); //判断当天是周几 var firstDayWeekDay = firstDay.getDay(); //修正星期天显示为0 if(firstDayWeekDay === 0) firstDayWeekDay = 7; //获取上个月的最后一天 var lastDayOfLastMonth = new Date(year, month - 1, 0); var lastDateOfLastMonth = lastDayOfLastMonth.getDate(); //获取上个月应该显示的天数 var preMonthDayCount = firstDayWeekDay - 1; //获取当月的最后一天 var lastDay = new Date(year, month, 0); var lastDate = lastDay.getDate();

查看全部

0 采集收起来源：获取日历数据
2018-03-15
chouwane

当月的第一天 new Date(year, month-1, 1) 当月的最后一天 new Date(year, month, 0) getFullyear() 获取年份 getMonth() 获取月份 getDate() 获取天 getDay() 获取星期几

查看全部

0 采集收起来源：前置知识
2018-03-06
删了一百个仓库呢 00:59

数据的作用

查看全部

0 采集收起来源：前置知识
2017-12-04
删了一百个仓库呢 02:02

课程安排

查看全部

0 采集收起来源：课程介绍
2017-12-04
Moirai 06:47

获取当前月首尾两天，每个月最后一天不一样注意星期天是0

查看全部

0 采集收起来源：前置知识
2017-11-01
Moirai 02:37

日期对象的月份是从0开始算起

查看全部

0 采集收起来源：前置知识
2017-11-01
一树青枫

后续可完善的功能：如何在移动端使用日期组件；当页面比较复杂的时候，如何处理，弹出框的位子；如何标记上一个月与下一个月的日期，使它们拥有不同的样式；某一些日期可点，某一些日期不可点。

查看全部

0 采集收起来源：总结
2017-09-11
一树青枫

课程总结（组件开发流程）：使用HTML合理规划组件结构；为组件编写美观的样式；如何使用JavaScript获取组件所需数据；将数据与HTML结构结合；用户事件处理；

查看全部

0 采集收起来源：总结
2017-09-11
hbxiaobai 06:28

日期对象

查看全部

0 采集收起来源：前置知识
2017-09-08
一树青枫

日期组件的绝对定位：目标是希望它出现在输入框的下方，所以就要先找到输入框目前在页面的哪个位置呢： var left = $input.offsetLeft; var top = $input.offsetTop; var height = $input.offsetHeight; $wrapper.style.top = top + height + 9 +'px'; $wrapper.style.left = left + 'px';

查看全部

0 采集收起来源：展开收起
2017-09-08
一树青枫

元素的显示与隐藏：方式很多样；最通用是通过class来控制，默认是隐藏，除非多了一个 block 的样式，后者覆盖前者，wrapper就才显示出来。 .classList.remove 与 .classList.add 的使用。 isOpen 布尔值来记录当前是关闭状态还是展开状态。

查看全部

0 采集收起来源：展开收起
2017-09-08