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

79次阅读

共计 6754 个字符,预计需要花费 17 分钟才能阅读完成。

准备工作
提前需要准备好 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 文件,这是我们的入口文件
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
<div id=”root”></div>
<script src=”./dist/main.js”></script>
</body>
</html>
以上环境只是一个极简单的环境,真实环境要比这个复杂的多。
好了,言归正传,我们还是聚焦到日历组件的开发中来吧
创建一个 src 文件夹,内部创建一个 index.tsx 文件。
这个入口文件很简单就是一个挂载
import * as React from ‘react’
import * as ReactDOM from ‘react-dom’

ReactDOM.render((
<div>
test
</div>
), document.getElementById(‘root’))

ok,打开页面可以看到页面正常显示了 test 字样。
我们需要创建 Calendar 组件了。
创建一个 components 文件夹,内部创建一个 Calendar.tsx 文件。
import * as React from ‘react’

export default class Calendar extends React.Component {
render() {

return (<div>
日历
</div>)
}
}
在 index.tsx 中把 Calendar.tsx 引入,并使用起来。于是 index.tsx 变成这个样子。
import * as React from ‘react’
import * as ReactDOM from ‘react-dom’
import Calendar from ‘./components/Calendar’

ReactDOM.render((
<div>
<Calendar/>
</div>
), 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 (<div>
<table cellPadding={0} cellSpacing={0} className=”table”>
<thead>
<tr>
{
WEEK_NAMES.map((week, key) => {
return <td key={key}>{week}</td>
})
}
</tr>
</thead>
<tbody>
{
LINES.map((l, key) => {
return <tr key={key}>
{
WEEK_NAMES.map((week, index) => {
return <td key={index}>{index}</td>
})
}
</tr>
})
}
</tbody>
</table>
</div>)
}
}
可以看到我们使用了一个星期数组作为表头,我们按照惯例是从周日开始的。你也可以从其他星期开始,不过会对下面的日期显示有影响,因为每个月的第一天是周几决定第一天显示在第几个格子里。
那为什么行数要 6 行呢?因为我们是按照最大行数来确定表格的行数的,如果一个月有 31 天,而这个月的第一天刚好是周六。就肯定会显示 6 行了。
为了显示好看,我直接写好了样式放置在 index.html 中了,这个不重要,不讲解。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
.table {
border-collapse:collapse;
border-spacing:0;
}
.table td{
border: 1px solid #ddd;
padding: 10px;
}
.table caption .caption-header{
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding: 10px;
display: flex;
justify-content: space-between;
}
.table caption .caption-header .arrow {
cursor: pointer;
font-family: “ 宋体 ”;
transition: all 0.3s;
}
.table caption .caption-header .arrow:hover {
opacity:0.7;
}
</style>
</head>
<body>
<div id=”root”></div>
<script src=”./dist/main.js”></script>
</body>
</html>
下面就要开始显示日期了,首先要把当前月份的日期显示出来,我们先在组件的 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 <span>&nbsp;</span>
}

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 <span>&nbsp;</span>
}

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 (<div>
{this.state.month}
<table cellPadding={0} cellSpacing={0} className=”table”>
<caption>
<div className=”caption-header”>
<span className=”arrow” onClick={this.monthChange.bind(this, -1)}>&#60;</span>
<span>{year} – {Calendar.formatNumber(month)}</span>
<span className=”arrow” onClick={this.monthChange.bind(this, 1)}>&gt;</span>
</div>
</caption>
<thead>
<tr>
{
WEEK_NAMES.map((week, key) => {
return <td key={key}>{week}</td>
})
}
</tr>
</thead>
<tbody>
{
LINES.map((l, key) => {
return <tr key={key}>
{
WEEK_NAMES.map((week, index) => {
return <td key={index} style={{color: this.checkToday(key, index, weekDay, monthDays) ? ‘red’ : ‘#000’}}>
{Calendar.getDayText(key, index, weekDay, monthDays)}
</td>
})
}
</tr>
})
}
</tbody>
</table>
</div>)
}
}
可以看到最终的代码多了一些东西,因为我加了月份的切换。
还记的上文我们把二月份天数写 28 天嘛?要不你们自己改改,判断一下闰年。

正文完
 0