react自制日期选择器

最新推荐文章于 2024-09-10 08:52:25 发布

yzy_blog

最新推荐文章于 2024-09-10 08:52:25 发布

阅读量2k

点赞数

分类专栏：技术 js react 文章标签： react 日期选择

本文链接：https://blog.csdn.net/weixin_39466493/article/details/80529567

版权

技术同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

35 篇文章 0 订阅

订阅专栏

react

4 篇文章 0 订阅

订阅专栏

自己写的react日期选择器，有bug请留言。

效果如图：

代码如下：

import React from 'react';

class Calendar extends React.Component {
constructor(props) {
super(props);
this.state = {
year: props.year,
month: props.month,
day: props.day,
dayList: 31,
yearList: props.yearList,
daysMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]//每月对应的天数
};
this.handelChangeYear = this.handelChangeYear.bind(this);
this.handelChangeMonth = this.handelChangeMonth.bind(this);
this.handelChangeDay = this.handelChangeDay.bind(this);
}

handelChangeYear(event){
const target = event.target;
const { value, name } = target;
const { year, month, day, dayList } = this.state;
const yearVal = target.value;
const monthIndex = this.state.month - 1;

if ((yearVal % 4 === 0 && yearVal % 100 !== 0) || yearVal % 400 === 0) {
this.state.daysMonth[1] = 29
}
const dayListVal = this.state.daysMonth[monthIndex];
this.setState({
[name]: value,
dayList: dayListVal
});
this.props.callback(value,this.state.month,this.state.day);
if(month==2 && day > 28){
this.setState({
day: 28
});
}

}

handelChangeMonth(event){
const target = event.target;
const { value, name } = target;
const { year, month, day, dayList } = this.state;
const monthIndex = event.target.value - 1;

if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
this.state.daysMonth[1] = 29
}
const dayListVal = this.state.daysMonth[monthIndex];

this.setState({
[name]: value,
dayList: dayListVal
});
this.props.callback(this.state.year,value,this.state.day);

if(event.target.value == 2 && day > 28){
console.log(this.state.daysMonth[1]);
setTimeout(()=>{
this.setState({
day: this.state.daysMonth[1]
});
})
}

if(day > 30 && (event.target.value == 4||6||9||11)){
this.setState({
day: 30
});
}
}

handelChangeDay(event){
const target = event.target;
const {value, name} = target;
const year = this.state.year;

this.setState({
[name]: value
});
this.props.callback(this.state.year,this.state.month,value);

}

render() {
const list =[];
const listYear =[];
for(let j= this.state.yearList[0]; j < this.state.yearList[1]; j++){
listYear.push(j);
}

for(let i=1;i<=this.state.dayList;i++){
list.push(i);
}

return(
<label>
<select name="year" value={this.state.year} onChange={this.handelChangeYear}>
{
listYear.map((year, index) => {
return (<option key={index} value={year}>{year}</option>);
})
}
</select>
<select name="month" value={this.state.month} onChange={this.handelChangeMonth}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="day" value={this.state.day} onChange={this.handelChangeDay}>
{
list.map((day, index) => {
return (<option key={index} value={day}>{day}</option>);
})
}
</select>
</label>
)
}
}

Calendar.defaultProps = {
year: 2017,
month: 1,
day: 1,
yearList: [2000, 2020]
}

class CalendarCon extends React.Component {
constructor(props) {
super(props)
}

changeFun = (year,month,day) => {
console.log(year,month,day);
}

render() {
return(
<Calendar year={2018} month={3} day={1} yearList={[2011,2110]} callback={this.changeFun}/>
)
}
}

export default CalendarCon;