手把手教会使用react开发日历组件

lingdududu 发布于2019-08-23 11:49 / 3262人阅读

摘要：你也可以从其他星期开始，不过会对下面的日期显示有影响，因为每个月的第一天是周几决定第一天显示在第几个格子里。首先要根据年月的第一天获得，根据这个获取周几。

准备工作

提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来转义，我们就自己大了个简易的开发环境

创建一个文件夹，命名为react-canlendar

</>复制代码 
cd ./react-canlendar

运行

</>复制代码 
npm init

一路enter我们得到一个package.json的文件

安装几个我们需要的脚手架依赖包

</>复制代码 
npm install awesome-typescript-loader typescript webpack webpack-cli -D

安装几个我们需要的类库

</>复制代码 
npm install @types/react react react-dom --save

基础类库安装完毕，开始构建webpack配置

新建一个目录config，config下面新增一个文件，名字叫做webpack.js

</>复制代码 
var path = require("path")
module.exports = {
    entry: {
        main: path.resolve(__dirname, "../src/index.tsx")
    },
    output: {
        filename: "[name].js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            {test: /.tsx?$/, use: ["awesome-typescript-loader"]}
        ]
    }
}

还需要创建一个index.html文件，这是我们的入口文件

</>复制代码 
    
    Document

以上环境只是一个极简单的环境，真实环境要比这个复杂的多。

好了，言归正传，我们还是聚焦到日历组件的开发中来吧

创建一个src文件夹，内部创建一个index.tsx文件。

这个入口文件很简单就是一个挂载

</>复制代码 
import * as React from "react"
import * as ReactDOM from "react-dom"
ReactDOM.render((
  
    test
  
), document.getElementById("root"))

ok，打开页面可以看到页面正常显示了test字样。

我们需要创建Calendar组件了。

创建一个components文件夹，内部创建一个Calendar.tsx文件。

</>复制代码 
import * as React from "react"
export default class Calendar extends React.Component {
  render() {
   
    return (
        日历
    )
  }
}

在index.tsx中把Calendar.tsx引入，并使用起来。于是index.tsx变成这个样子。

</>复制代码 
import * as React from "react"
import * as ReactDOM from "react-dom"
import Calendar from "./components/Calendar"
ReactDOM.render((
  
    
  
), document.getElementById("root"))

可以看到页面显示了日历字样。

要显示日历，首先需要显示日历这个大框以及内部的一个个小框。实现这种布局最简单的布局就是table了

所以我们首先创建的是这种日历table小框框，以及表头的星期排列。

</>复制代码 
import * as React from "react"
const WEEK_NAMES = ["日", "一", "二", "三", "四", "五", "六"]
const LINES = [1,2,3,4,5,6]
export default class Calendar extends React.Component {
  render() {
    return (
      
          {
            WEEK_NAMES.map((week, key) => {
              return 
            })
          }
        
        {
          LINES.map((l, key) => {
            return 
              {
                WEEK_NAMES.map((week, index) => {
                  return 
                })
              }
            
          })
        }
        
        
        
        
        
      
{week}
{index}
    )
  }
}

{week}
{index}

可以看到我们使用了一个星期数组作为表头，我们按照惯例是从周日开始的。你也可以从其他星期开始，不过会对下面的日期显示有影响，因为每个月的第一天是周几决定第一天显示在第几个格子里。

那为什么行数要6行呢？因为我们是按照最大行数来确定表格的行数的，如果一个月有31天，而这个月的第一天刚好是周六。就肯定会显示6行了。

为了显示好看，我直接写好了样式放置在index.html中了，这个不重要，不讲解。

</>复制代码 
    
    Document

下面就要开始显示日期了，首先要把当前月份的日期显示出来，我们先在组件的state中定义当前组件的状态

</>复制代码 
state = {
    month: 0,
    year: 0,
    currentDate: new Date()
}

我们定义一个方法获取当前年月，为什么不需要获取日，因为日历都是按月显示的。获取日现在看来对我们没有意义，于是新增一个方法，设置当前组件的年月

</>复制代码 
setCurrentYearMonth(date) {
    var month = Calendar.getMonth(date)
    var year = Calendar.getFullYear(date)
    this.setState({
      month,
      year
    })
}
static getMonth(date: Date): number{
    return date.getMonth()
}
static getFullYear(date: Date): number{
    return date.getFullYear()
}

创建两个静态方法获取年月，为什么是静态方法，因为与组件的实例无关，最好放到静态方法上去。

要想绘制一个月还需要知道一个月的天数吧，才好绘制吧

所以我们创建一个数组来表示月份的天数

</>复制代码 
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]  // 暂定2月份28天吧

组件上创建一个函数，根据月份获取天数，也是静态的

</>复制代码 
static getCurrentMonthDays(month: number): number {
    return MONTH_DAYS[month]
}

下面还有一个重要的事情，就是获取当前月份第一天是周几，这样子就可以决定把第一天绘制在哪里了。首先要根据年月的第一天获得date，根据这个date获取周几。

</>复制代码 
static getDateByYearMonth(year: number, month: number, day: number=1): Date {
    var date = new Date()
    date.setFullYear(year)
    date.setMonth(month, day)
    return date
  }

这里获得每个月的第一天是周几了。

</>复制代码 
static getWeeksByFirstDay(year: number, month: number): number {
    var date = Calendar.getDateByYearMonth(year, month)
    return date.getDay()
  }

好了，开始在框子插入日期数字了。因为每个日期都是不一样的，这个二维数组可以先计算好，或者通过函数直接插入到jsx中间。

</>复制代码 
static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
    var number = line * 7 + weekIndex - weekDay + 1
    if ( number <= 0 || number > monthDays ) {
      return  
    }
    return number
  }

看一下这个函数需要几个参数哈，第一个行数，第二个列数（周几），本月第一天是周几，本月天数。line * 7 + weekIndex表示当前格子本来是几，减去本月第一天星期数字。为什么+1，因为索引是从0开始的，而天数则是从1开始。那么<0 || >本月最大天数的则过滤掉，返回一个空span，只是为了撑开td。其他则直接返回数字。

</>复制代码 
import * as React from "react"
const WEEK_NAMES = ["日", "一", "二", "三", "四", "五", "六"]
const LINES = [1,2,3,4,5,6]
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
export default class Calendar extends React.Component {
  state = {
    month: 0,
    year: 0,
    currentDate: new Date()
  }
  componentWillMount() {
    this.setCurrentYearMonth(this.state.currentDate)
  }
  setCurrentYearMonth(date) {
    var month = Calendar.getMonth(date)
    var year = Calendar.getFullYear(date)
    this.setState({
      month,
      year
    })
  }
  static getMonth(date: Date): number{
    return date.getMonth()
  }
  static getFullYear(date: Date): number{
    return date.getFullYear()
  }
  static getCurrentMonthDays(month: number): number {
    return MONTH_DAYS[month]
  }
  static getWeeksByFirstDay(year: number, month: number): number {
    var date = Calendar.getDateByYearMonth(year, month)
    return date.getDay()
  }
  static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
    var number = line * 7 + weekIndex - weekDay + 1
    if ( number <= 0 || number > monthDays ) {
      return  
    }
    return number
  }
  static formatNumber(num: number): string {
    var _num = num + 1
    return _num < 10 ? `0${_num}` : `${_num}`
  }
  static getDateByYearMonth(year: number, month: number, day: number=1): Date {
    var date = new Date()
    date.setFullYear(year)
    date.setMonth(month, day)
    return date
  }
  checkToday(line: number, weekIndex: number, weekDay: number, monthDays: number): Boolean {
    var { year, month } = this.state
    var day = Calendar.getDayText(line, weekIndex, weekDay, monthDays)
    var date = new Date()
    var todayYear = date.getFullYear()
    var todayMonth = date.getMonth()
    var todayDay = date.getDate()
    return year === todayYear && month === todayMonth && day === todayDay
  }
  monthChange(monthChanged: number) {
    var { month, year } = this.state
    var monthAfter = month + monthChanged
    var date = Calendar.getDateByYearMonth(year, monthAfter)
    this.setCurrentYearMonth(date)
  }
  render() {
    var { year, month } = this.state
    console.log(this.state)
    var monthDays = Calendar.getCurrentMonthDays(month)
    var weekDay = Calendar.getWeeksByFirstDay(year, month)
    return (
      {this.state.month}
      
            {
              WEEK_NAMES.map((week, key) => {
                return 
              })
            }
          
        {
          LINES.map((l, key) => {
            return 
              {
                WEEK_NAMES.map((week, index) => {
                  return 
                })
              }
            
          })
        }
        
        
        
          
        
        
      
          
            <
            {year} - {Calendar.formatNumber(month)}
            >
          
        {week}
                    {Calendar.getDayText(key, index, weekDay, monthDays)}
                  
    )
  }
}

<
{year} - {Calendar.formatNumber(month)}
>
{week}
{Calendar.getDayText(key, index, weekDay, monthDays)}

可以看到最终的代码多了一些东西，因为我加了月份的切换。

还记的上文我们把二月份天数写28天嘛？要不你们自己改改，判断一下闰年。

创建了一个程序员交流微信群，大家进群交流IT技术

如果已过期，可以添加博主微信号15706211347，拉你进群

云服务器 GPU云服务器日历组件 react使用webrtc react开发神器 docker react 开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97510.html

手把手教会使用react开发日历组件

摘要：你也可以从其他星期开始，不过会对下面的日期显示有影响，因为每个月的第一天是周几决定第一天显示在第几个格子里。首先要根据年月的第一天获得，根据这个获取周几。准备工作提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来转义，我们就自己大了个简易的开发环境创建一个文件夹，命名为react-canlendar cd ./react-c...

remcarpediem 2019-08-29 16:38 评论0 收藏0
redux原来如此简单

摘要：是状态容器，提供可预测化的状态管理。一般我们会使用一个常量来表示对应的值。作为纯函数，内部不建议使用任何有副作用的操作，比如操作外部的变量，任何导致相同输入但输出却不一致的操作。结合，其他类库，开发步骤莫不如此。 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。那什么是可以预测化，我的理解就是根据一个固定的输入，必然会得到一个固定的结果。 redux是专门为...

wuyumin 2019-08-23 11:50 评论0 收藏0
webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目，希望对你有帮助。 github地址, 有不错的就更新官方文档中文指南初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶　 webpack-demos 作者：ruanyf 一小时包教会 —— webpack 入门指南作者：VaJoy Larn　　 webpack 入门及实践作者：...

Backache 2019-08-21 14:05 评论0 收藏0
前端窝 - 收藏集 - 掘金

摘要：毫无疑问，设计模式于己于他人于系统都是多赢的设计模式使代码编写真正工程化设计模小书前端掘金这是一本关于的小书。 JavaScript 常见设计模式解析 - 掘金设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的；设计...

李文鹏 2019-08-21 11:41 评论0 收藏0