最近公司項目有地方用到平鋪的時間選擇組件，並且只能選擇當天之後的時間，還要能切換月份，尋思antd都是下拉彈出框的datepicker，沒有想要的效果，於是就自己寫了，分享給大家。
先看效果（這個只是demo，樣式無視）:
紫色的代表當天以後的時間，運用的時候可以在事件函數回調中再判斷下是否所選時間大於當天時間；點擊prev/next按鈕切換月份，當12月時next後自動切爲下一年，1月時prev後自動切爲上一年；（很懶，沒寫註釋，能提升大家閱碼能力也不錯哈///(●'◡'●)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
table {
width: 300px;
border-collapse: collapse;
}
th, td {
text-align: center;
border: 1px solid green;
}
.isValid {
background: purple;
}
</style>
<body>
<div>
<button class="prev">prev</button> <button class="next">next</button> <span class="label"></span>
</div>
<table class="table">
<thead>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</thead>
<tbody class="tbody">
</tbody>
</table>
<script>
class InterviewDate {
state = {
cDate: new Date()
}
getCurrYear() {
return this.state.cDate.getFullYear()
}
getCurrMounth() {
return this.state.cDate.getMonth() + 1
}
getCurrWeek() {
return this.state.cDate.getDay()
}
getMounthDays(mounth) {
return new Date(this.getCurrYear(), mounth || this.getCurrMounth(), 0).getDate()
}
onTdClick = (e) => {
let d = e.target.innerText, m = this.getCurrMounth()+'', y = this.getCurrYear()
d = d.length == 1 ? 0 + d : d
m = m.length == 1 ? 0 + m : m
console.log(y + '/' + m + '/' + d)
}
render() {
let y = this.getCurrYear(), m = this.getCurrMounth()
let str = ''
let mounthStartWeek = new Date(y, m - 1, 1).getDay()
while (mounthStartWeek > 0) {
str += '<td></td>'
--mounthStartWeek
}
let tr = $('<tr></tr>').html(str)
for (let j = 1; j <= this.getMounthDays(); j++) {
let td = $('<td></td>')
if (new Date(y, m - 1, j, 24).getTime() >= new Date().getTime()) {
td.addClass('isValid')
}
td.text(j)
td.on('click', this.onTdClick)
tr.append(td)
if (tr.find('td').length == 7) {
$(".tbody").append(tr)
tr = $('<tr></tr>')
}
}
if (tr.find('td').length) $(".tbody").append(tr)
}
next() {
this.state.cDate = new Date(this.getCurrYear(), this.getCurrMounth())
$(".tbody").text('')
this.render()
}
prev() {
this.state.cDate = new Date(this.getCurrYear(), this.getCurrMounth() - 2)
$(".tbody").text('')
this.render()
}
}
let obj = new InterviewDate()
obj.render()
$('.label').text(obj.getCurrYear() + '年' + obj.getCurrMounth() + '月')
$('.prev').on('click', () => {
obj.prev()
$('.label').text(obj.getCurrYear() + '年' + obj.getCurrMounth() + '月')
})
$('.next').on('click', () => {
obj.next()
$('.label').text(obj.getCurrYear() + '年' + obj.getCurrMounth() + '月')
})
</script>
</body>
</html>
react版
import {Component} from 'react'
import {Icon} from 'antd'
import styles from './index.less'
export default class RepeatPicker extends Component {
state = {
cDate: new Date(),
active: new Date()
}
getCurrYear() {
return this.state.cDate.getFullYear()
}
getCurrMounth() {
return this.state.cDate.getMonth() + 1
}
getCurrWeek() {
return this.state.cDate.getDay()
}
getMounthDays(mounth) {
return new Date(this.getCurrYear(), mounth || this.getCurrMounth(), 0).getDate()
}
onTdClick = (e) => {
let d = e.target.innerText, m = this.getCurrMounth()+'', y = this.getCurrYear()
d = d.length == 1 ? 0 + d : d
m = m.length == 1 ? 0 + m : m
let active = y + '/' + m + '/' + d
console.log(active)
this.setState({active: new Date(active)}, ()=>{
this.props.onChange(active)
})
}
renderTD() {
let y = this.getCurrYear(), m = this.getCurrMounth()
let result = [], trIdx = 0, gKey = 0
let mounthStartWeek = new Date(y, m - 1, 1).getDay()
result[trIdx] = []
while (mounthStartWeek > 0) {
result[trIdx].push(<td key={gKey}></td>)
--mounthStartWeek
++gKey
}
for (let j = 1; j <= this.getMounthDays(); j++) {
++gKey
let getclass = ()=>{
let re = ''
let class1 = new Date(y, m - 1, j, 24).getTime() >= new Date().getTime() ? styles.isValid : null
if(class1){
if(this.getCurrMounth() == new Date().getMonth()+1 && this.state.active.getDate() == j){
re = class1 + ' ' + styles.active
}else{
re = class1
}
}
return re
}
let td = <td className={getclass()} onClick={this.onTdClick} key={gKey}>
<div className={styles.bg}>{j}</div>
</td>
if (result[trIdx].length == 7) {
++trIdx
result[trIdx] = []
}
result[trIdx].push(td)
}
return result
}
next = ()=> {
this.state.cDate = new Date(this.getCurrYear(), this.getCurrMounth())
this.forceUpdate()
}
prev = ()=> {
this.state.cDate = new Date(this.getCurrYear(), this.getCurrMounth() - 2)
this.forceUpdate()
}
render (){
return (
<div className={styles.box}>
<div className={styles.tit}>
<div>請選擇日期</div>
<div>
{
this.getCurrMounth() > new Date().getMonth()+1 ?
<Icon type="left" onClick={this.prev}/>
:null
}
<span className={styles.month}>{`${this.getCurrYear()}年${this.getCurrMounth()}月`}</span>
<Icon type="right" onClick={this.next}/>
</div>
</div>
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody className={styles.tbody}>
{
this.renderTD().map((v,i)=>(
<tr key={i}>{v}</tr>
))
}
</tbody>
</table>
</div>
)
}
}