React에서 날짜 범위 선택기 만들기
28446 단어 reactreactnativetutorialbeginners
React의 날짜 범위 선택기 구성 요소
먼저 제목, 요일, 요일과 같은 날짜 범위 선택기에 필요한 기본 기능 구성 요소를 만듭니다. 따라서 프로젝트에 date-range-picker-components.js 파일을 생성합니다.
const Heading = ({date, changeMonth, resetDate}) => (
<nav className="daterangepicker--nav">
<a onClick={() => changeMonth(date.month() - 1)}>‹</a>
<h1 onClick={() => resetDate()}>{date.format('MMMM')} <small>{date.format('YYYY')}</small></h1>
<a onClick={() => changeMonth(date.month() + 1)}>›</a>
</nav>
);
const Day = ({currentDate, date, startDate, endDate, onClick}) => {
let className = [];
if (moment().isSame(date, 'day')) {
className.push('active');
}
if (date.isSame(startDate, 'day')) {
className.push('start');
}
if (date.isBetween(startDate, endDate, 'day')) {
className.push('between');
}
if (date.isSame(endDate, 'day')) {
className.push('end');
}
if (! date.isSame(currentDate, 'month')) {
className.push('muted');
}
return (
<span onClick={() => onClick(date)} currentDate={date} className={className.join(' ')}>{date.date()}</span>
)
};
const Days = ({date, startDate, endDate, onClick}) => {
const thisDate = moment(date);
const daysInMonth = moment(date).daysInMonth();
const firstDayDate = moment(date).startOf('month');
const previousMonth = moment(date).subtract(1, 'month');
const previousMonthDays = previousMonth.daysInMonth();
const nextsMonth = moment(date).add(1, 'month');
let days = [];
let labels = [];
for (let i = 1; i <= 7; i++) {
labels.push(<span className="label">{moment().day(i).format('ddd')}</span>);
}
for (let i = firstDayDate.day(); i > 1; i--) {
previousMonth.date(previousMonthDays - i + 2);
days.push(
<Day key={moment(previousMonth).format('DD MM YYYY')} onClick={(date) => onClick(date)} currentDate={date} date={moment(previousMonth)} startDate={startDate} endDate={endDate} />
);
}
for (let i = 1; i <= daysInMonth; i++) {
thisDate.date(i);
days.push(
<Day key={moment(thisDate).format('DD MM YYYY')} onClick={(date) => onClick(date)} currentDate={date} date={moment(thisDate)} startDate={startDate} endDate={endDate} />
);
}
const daysCount = days.length;
for (let i = 1; i <= (42 - daysCount); i++) {
nextsMonth.date(i);
days.push(
<Day key={moment(nextsMonth).format('DD MM YYYY')} onClick={(date) => onClick(date)} currentDate={date} date={moment(nextsMonth)} startDate={startDate} endDate={endDate} />
);
}
return (
<nav className="daterangepicker--days">
{labels.concat()}
{days.concat()}
</nav>
);
};
export default { Heading, Days };
React에서 날짜 범위 선택기 만들기
이제 위에서 정의한 구성 요소를 가져올 수 있습니다(date-range-picker-components는 구성 요소의 파일 이름입니다).
import { Heading, Days } from './date-range-picker-components';
class DateRangePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
date: moment(),
startDate: moment().subtract(5, 'day'),
endDate: moment().add(3, 'day')
};
}
resetDate() {
this.setState({
date: moment()
});
}
changeMonth(month) {
const {date} = this.state;
date.month(month);
this.setState(
date
);
}
changeDate(date) {
let {startDate, endDate} = this.state;
if (startDate === null || date.isBefore(startDate, 'day') || ! startDate.isSame(endDate, 'day')) {
startDate = moment(date);
endDate = moment(date);
} else if (date.isSame(startDate, 'day') && date.isSame(endDate, 'day')) {
startDate = null;
endDate = null;
} else if (date.isAfter(startDate, 'day')) {
endDate = moment(date);
}
this.setState({
startDate,
endDate
});
}
render() {
const {date, startDate, endDate} = this.state;
return (
<div className="daterangepicker">
<Heading date={date} changeMonth={(month) => this.changeMonth(month)} resetDate={() => this.resetDate()} />
<Days onClick={(date) => this.changeDate(date)} date={date} startDate={startDate} endDate={endDate} />
</div>
);
}
}
구독 좋아요 공유와 긍정적인 피드백을 해주세요.
더 많은 자습서를 보려면 visit my website .
감사:)
행복한 코딩 :)
Reference
이 문제에 관하여(React에서 날짜 범위 선택기 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/create-date-range-picker-in-react-bnb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)