js实现日历功能

最新推荐文章于 2024-07-21 10:17:51 发布

kongsicheng

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量95

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kongsicheng/article/details/140336679

版权

DatePicker.js

class DatePicker{
    constructor(id, callback){
        this.id = id;
        this.callback = callback;
    }

    render(date){
        this.date = date;
        this.update();
    }

    create(parent, type, content){
        const child = document.createElement(type);
        child.textContent = content;
        parent.appendChild(child);
        if (parent.nodeName === 'CAPTION' && content !== '>>'){
            parent.appendChild(document.createTextNode('\u00A0\u00A0\u00A0'));
        }
        return child;
    }

    //计算天数(上个月{-1}, 当前月
    getDays(year, month, i) {
        let days = 0;
        if (i === -1){
            if (month === 0) {
                year -= 1;
                month = 11;
            } else {
                month -= 1;
            }
        }
        days = new Date(year, month, 0).getDate();
        return days;
    }

    update(){
        const root = document.getElementById(this.id);
        const table = this.create(root, 'table')
        table.style.border = '1px solid black';

        const caption = this.create(table, 'caption');
        const year_prev = this.create(caption, 'span', '<<');
        year_prev.addEventListener('click', ()=> {
            this.date.setFullYear(this.date.getFullYear() - 1);
            this.update();
            table.remove();
        })
        const month_prev = this.create(caption, 'span', '<');
        month_prev.addEventListener('click', ()=> {
            this.date.setMonth(this.date.getMonth() - 1);
            this.update();
            table.remove();
        })
        let year = this.date.getFullYear();
        let month = this.date.getMonth() + 1;
        const year_span = this.create(caption, 'span', year);        
        const month_span = this.create(caption, 'span', month);
        const month_next = this.create(caption, 'span', '>');
        month_next.addEventListener('click', ()=> {
            this.date.setMonth(this.date.getMonth() + 1);
            this.update();
            table.remove();
        })
        const year_next = this.create(caption, 'span', '>>');    
        year_next.addEventListener('click', ()=> {
            this.date.setFullYear(this.date.getFullYear() + 1);
            this.update();
            table.remove();
        })    

        const tr = this.create(table, 'tr');
        
        const headers = ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];
        for(let day of headers){
            this.create(tr, 'th', day);
        }

        let days_now = this.getDays(year, month);    

        let offset = 6;
        let first_day = new Date(year, month - 1, 1).getDay();
        if (first_day){
            offset = first_day - 1;
        } 

        let tr_now = undefined;
        let cur = this.getDays(year, month, -1);

        for (let i = 0; i < Math.ceil((days_now + offset)/ 7) * 7; i++){
            if (!(i % 7)){
                tr_now = this.create(table, 'tr');
            }  
            if (i - offset + 1 <= 0){
                let td = this.create(tr_now, 'td', cur + i - offset + 1);
                td.style.color = '#717171';
            }
            else if(i - offset + 1 > days_now){
                let td = this.create(tr_now, 'td', i - offset + 1 - days_now);
                td.style.color = '#777777';
            }
            else{
                let td = this.create(tr_now, 'td', i - offset + 1);  
                td.addEventListener('click', (event)=>{
                    this.callback(this.id, {
                    year: this.date.getFullYear(),
                    month: this.date.getMonth() + 1,
                    day: event.target.textContent
                    })
                });
            }
        }
    }
}

datepicker.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>CS 142 Project 3, Problem 1</title>
  <link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>

<body>
  <h1>First DatePicker</h1>
  <div id="datepicker1"></div>
  <h1>Second DatePicker</h1>
  <div id="datepicker2"></div>
  <script type="text/javascript" src="DatePicker.js"></script>
  <script type="text/javascript">
    // <![CDATA[
    'use strict';

    /* global DatePicker */

    var datePicker1 = new DatePicker('datepicker1', function (id, fixedDate) {
      console.log(
        'DatePicker with id',
        id,
        'selected date:',
        fixedDate.month + '/' + fixedDate.day + '/' + fixedDate.year,
      );
    });
    datePicker1.render(new Date());
    var datePicker2 = new DatePicker('datepicker2', function (id, fixedDate) {
      console.log(
        'DatePicker with id',
        id,
        'selected date:',
        fixedDate.month + '/' + fixedDate.day + '/' + fixedDate.year,
      );
    });
    datePicker2.render(new Date('1/1/2009'));
    // ]]>
  </script>
</body>

</html>

实现了日历的查看，可以对年月的加减

效果图（想好看可以自己添加css）