DatePicker组件开发_学习笔记

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

DatePicker组件开发

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

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

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

最热最新

aSuncat

二、date.js

(function() { // 为了防止模块编写的时候污染外部环境，就会用匿名函数。
  let datepicker = {};
  datepicker.getMonthData = function(year, month) {
    let ret = [];
    if (!year && !month && month !==0) {
      let today = new Date();
      year = today.getFullYear();
      month = today.getMonth() + 1;
    }
    let firstDay = new Date(year, month - 1, 1);
    let firstDayWeekDay = firstDay.getDay();
    if (firstDayWeekDay === 0) {
      firstDayWeekDay = 7;
    }
    year = firstDay.getFullYear(); // 哪年
    month = firstDay.getMonth() + 1; // 哪月
    let lastDayOfLastMoth = new Date(year, month - 1, 0); // 上个月最后一天
    let lastDateOfLastMonth = lastDayOfLastMoth.getDate(); // 上个月最后一天是几号
    let preMonthDayCount = firstDayWeekDay - 1; // 上个月最后一天是星期几
    let lastDay = new Date(year, month, 0); // 这个月最后一天
    let lastDate = lastDay.getDate(); // 这个月最后一天是几号
    for (let i = 0; i < 7*6; i++) {
      let date = i - preMonthDayCount + 1; // 距离上个月最后一天多长时间（单位：天）
      let showDate = date;
      let thisMonth = month;
      if (date <= 0) {
        // 上一月
        thisMonth = month - 1; // 上个月月份
        showDate = lastDateOfLastMonth + date; // 上个月日期
      } else if (date > lastDate) {
        // 下一月
        thisMonth = month + 1; // 下个月月份
        showDate = showDate - lastDate; // 下个月日期
      }
      // if (thisMonth === 0) {
      //   thisMonth = 12;
      // }
      // if (thisMonth === 13) {
      //   thisMonth = 1;
      // }
      thisMonth = thisMonth === 0 ? 12 :thisMonth === 13 ? 1 : thisMonth;
      ret.push({
        month: thisMonth,
        date: date,
        showDate: showDate
      });
    }
    return {
      year: year,
      month: month,
      days: ret
    };
  };
  window.datePicker = datepicker;
})();

三、main.js

(function() {
  let datePicker = window.datePicker;
  let monthData;
  let $wrapper;
  datePicker.buildUi = function(year, month) {
    monthData = datePicker.getMonthData(year, month);
    let html = '<div class="ui-datepicker-head">'+
      '<a class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>'+
      ' <a class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>'+
    ' <span class="ui-datepicker-curr-month">' + monthData.year + '- ' + monthData.month + '</span>'+
    ' </div>'+
    ' <div class="ui-datepicker-body">'+
    ' <table>'+
    ' <thead>'+
    '  <tr>'+
      '<th>一</th>'+
      ' <th>二</th>'+
    ' <th>三</th>'+
    '<th>四</th>'+
    '<th>五</th>'+
    ' <th>六</th>'+
    ' <th>七</th>'+
   '   </tr>'+
      '</thead>'+
     ' <tbody>';
    for (let i = 0; i < monthData.days.length; i++) {
      let date = monthData.days[i];
      if (i % 7 === 0) {
        html += '<tr>';
      }
      html += '<td data-date="' + date.date + '">' + date.showDate + '</td>';
      if (i % 7 === 6) {
        html += '</tr>';
      }
    }
    html += '</tbody>' +
        '</table>' +
        '</div>';
    return html;
  };
  datePicker.render = function(direction) {
    let year,month;
    if (monthData) {
      year = monthData.year;
      month = monthData.month;
    }
    if (direction === 'prev') {
      month--;
    }
    if (direction === 'next') {
      month++;
    }
    let html = datePicker.buildUi(year, month);
    $wrapper = document.querySelector('.ui-datepicker-wrapper');
    if (!$wrapper) {
      $wrapper = document.createElement('div');
      document.body.appendChild($wrapper);
      $wrapper.className = 'ui-datepicker-wrapper';
    }
    $wrapper.innerHTML = html;
  };
  datePicker.init = function($dom) {
    datePicker.render();
    let $input = document.querySelector($dom);
    let isOpen = false;
    // $dom点击后,日历显示出来，日历位置适应。
    $input.addEventListener('click', function() {
      if (isOpen) {
        $wrapper.classList.remove('ui-datepicker-wrapper-show');
        isOpen = false;
      } else {
        $wrapper.classList.add('ui-datepicker-wrapper-show');
        let left = $input.offsetLeft;
        let top = $input.offsetTop;
        let height = $input.offsetHeight;
        $wrapper.style.top = top + height + 2 + 'px';
        $wrapper.style.left = left + 'px';
        isOpen = true;
      }
    }, false);
    // $wrapper.querySelector('.ui-datepicker-btn').addEventListener();
    // 每次渲染完重新绑定事件
    // 为不变的元素绑定事件
    $wrapper.addEventListener('click', function(e) {
      let $target = e.target;
      // let containsBtn = $target.classList.contains('ui-datepicker-btn');
      if (!$target.classList.contains('ui-datepicker-btn')) {
        return;
      }
      if ($target.classList.contains('ui-datepicker-prev-btn')) {
        datePicker.render('prev');
      } else if ($target.classList.contains('ui-datepicker-next-btn')) {
        datePicker.render('next');
      }
    }, false);
    $wrapper.addEventListener('click', function(e) {
      let $target = e.target;
      if ($target.tagName.toLowerCase() !== 'td') {
        return;
      }
      let date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);
      $input.value = format(date);
      $wrapper.classList.remove('ui-datepicker-wrapper-show');
      isOpen = false;
    })
  }
  function format(date) {
    let ret = '';
    let shuffle = function(num) {
      if (num <= 9) {
        return `0${num}`;
      }
      return num;
    };
    ret += date.getFullYear() + '-';
    ret += shuffle(date.getMonth() + 1) + '-';
    ret += shuffle(date.getDate());
    return ret;
  }
})();

查看全部

3 采集收起来源：总结

2018-07-26

武慕林

(function () { var datepicker = {};datepicker.getMonthData = function (year, month) {var ret = []; if (!year || !month) { var today =new Date();year=today.getFullYear(); month = today.getMonth() + 1;}var firstDay =newDate(year, month - 1, 1);var firstDayWeekDay = firstDay.getDay(); if (firstDayWeekDay === 0) { firstDayWeekDay = 7;var lastDayOfLastMonth = new Date(year, month -1,0);varlastDateOfLastMonth=lastDayOfLastMonth.getDate();var preMonthDayCount = firstDayWeekDay - 1; var lastDay = new Date(year, month, 0);var lastDate = lastDay.getDate(); for (var i = 0; i < 7 * 6; i++) {var date = i -preMonthDayCount + 1;var showDate = date;var thisMonth = month;if (date <= 0) {thisMonth = month - 1; showDate = lastDateOfLastMonth + date; }else if (date > lastDate) {thisMonth = month + 1; showDate = showDate - lastDate; }if(thisMonth === 0) { thisMonth = 12 }; if (thisMonth === 13) { thisMonth = 1 }; ret.push({ month: thisMonth, date: date, showDate: showDate }); }return ret; };})();

查看全部

3 采集收起来源：获取日历数据
2018-03-22
越来越泳

new Date(year, month-1, date)
月份需要减一
越界自动退位
getFullYear()/ getMonth()/ getDate() / getDay() [获取星期0到6]
当月第一天new Date(year, minth-1, 1)
当月最后一天new Date(year, month,0)

查看全部

1 采集收起来源：前置知识
2019-03-22
aSuncat

一、优化方向：
1、如何在移动端使用这个组件。
2、页面定位比较复杂时，如何处理弹出框的位置。
3、如何让上一个月，下一个月，使用不同的样式。
4、如何让某些日期可点，某些日期不可点。

查看全部

1 采集收起来源：总结
2018-07-26
aSuncat

一、<a href=""> 写了href，但是里面没有赋值，导致点击a链接会重新刷新页面，一直不能跳转到上一个月。这个bug找了很久。

查看全部

1 采集收起来源：月份切换
2018-07-26
aSuncat

一、webstorm：从1到10递增快捷键：li{$}*10

查看全部

1 采集收起来源：静态结构
2018-07-25
qq_昨夜闲谈梦落花_0

//循环获取当前月的每一天 for(var i=0; i<42; i++){ //算出真实日期是多少(只看day 不考虑month) var date = i - preMonthDayCount +1; var showDate = date; //指定当前月 var thisMonth = month; //处理上一月与下一月 if(date <= 0){ //上一月 thisMonth = month - 1; showDate = lastDateOfLastMonth + date; }else if(date > lastDate){ //下一月 thisMonth = month + 1; showDate = showDate - lastDate; } //修正月显示 if(thisMonth === 0) thisMonth =12; if(thisMonth === 13) thisMonth = 1; //返回相关数据 ret.push({ month:thisMonth, date:date, showDate:showDate }) } return ret; }; window.datepicker = datepicker; })();

查看全部

1 采集收起来源：获取日历数据
2018-03-22
删了一百个仓库呢 00:36

结构分析

查看全部

1 采集收起来源：静态结构
2017-12-04
一树青枫

本节课的出发点：左右按钮切换时，进入上一月，或者下一月。初始化的时候，给按钮绑定事件。但这种情况，是在组件初始化的时候才有效，事件只绑定了一次；但页面渲染之后，内容里是根据按钮再重新渲染的，我们的按钮也是感觉HTML字符串再重新渲染的，因此就会有按钮不断的销毁与重建。

查看全部

1 采集收起来源：月份切换
2017-09-08
ZXY狼惜

data-*是一个比较新的API，老的浏览器不能使用。*是要替换成自己命名的字符。为一个标签添加一个此属性后，js取值的时候是：target.dataset.d; target:添加此属性的标签对象 dataset:固定写法 d:添加的属性名的后半部分，即data-*中“-”后自己命名的字符。

查看全部

1 采集收起来源：点击选择
2017-08-11
卷狗 05:06

当月第一天,和当月最后一天的获取方式...这个就确实比较扯了,但事实上它就要这样....

查看全部

0 采集收起来源：前置知识
2021-09-23
qiug 06:22

第一天
new Date(year, minth-1, 1)
最后一天
new Date(year, month,0)

查看全部

0 采集收起来源：前置知识
2020-04-28

慕粉2466386

(function () {
   var datepicker = {};
    datepicker.getMonthData = 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();
        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();

        //利用循环查询到一周日期
        for( var i = 0; i<7*6; i++){
            var date = i+1 - preMonthDayCount;
            var showDate = date;
            var thisMonth = month;
            if(date <= 0){
                thisMonth = month +1;
                showDate = lastDateOfLastMonth +date;
            }else if(date > lastDate){
                thisMonth = month +1;
                showDate = showDate-lastDate;
            }if(thisMonth === 0)thisMonth = 12;
            if(thisMonth === 13) thisMonth = 1;

            ret.push({
               month:thisMonth,
               date:date,
                showDate:showDate
            });
        }
        return ret;
    };
   window.datepicker = datepicker;

})();

查看全部

0 采集收起来源：获取日历数据

2019-07-19

aSuncat

一、为了防止模块编写的时候污染环境，就会用匿名函数。

查看全部

0 采集收起来源：获取日历数据
2018-07-25
aSuncat

一、日期对象：new Date(year, month-1, date)
1、月份需要-1.
2、越界自动进（退）位
3、getFullYear() / getMonth() / getDate()
4、getYear()：当前年距离1900年多少年。
5、getDay()：当前日期是周几
二、日期
1、当月第一天：new Date(year, month-1, 1)。
2、当月最后一天：new Date(year, month, 0)。
3、星期一-星期天[1, 2, 3, 4, 5, 6, 0]

查看全部

0 采集收起来源：前置知识
2018-07-25

0/150

提交

取消

开始学习

课程须知: 需要有HTML/CSS/JavaScript基础

老师告诉你能学到什么？: 1、使用HTML和CSS编写组件的静态UI 2、使用原生javascript完成日历数据的获取 3、使用原生javascript实现静态UI和动态数据的结合，完成日历数据的渲染 4、事件绑定处理 5、前端组件的基本构成和编写模式

微信扫码，参与3人拼团

热搜

最近搜索清空

DatePicker组件开发