日付範囲ピッカーを作成する
28342 ワード
日付範囲ピッカーコンポーネントは、ユーザーが日付の範囲を選択できるドロップダウンメニューまたはカレンダーを作成します.
最初に基本的な機能コンポーネントを見出し、日、日のように私たちの日付範囲ピッカーに必要な作成します.したがって、ファイルの日付範囲ピッカーのコンポーネントを作成します.あなたのプロジェクトのJS.
さて、上記のコンポーネントをインポートすることができます.
より多くのチュートリアルのために、visit my website .
ありがとう
ハッピーコーディング
日付範囲ピッカーコンポーネント反応
最初に基本的な機能コンポーネントを見出し、日、日のように私たちの日付範囲ピッカーに必要な作成します.したがって、ファイルの日付範囲ピッカーのコンポーネントを作成します.あなたのプロジェクトの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 };
日付範囲ピッカーを作成する
さて、上記のコンポーネントをインポートすることができます.
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
この問題について(日付範囲ピッカーを作成する), 我々は、より多くの情報をここで見つけました https://dev.to/readymadecode/create-date-range-picker-in-react-bnbテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol