一款很实用的ReactJS日期范围选择控件

React date range picker 常用于项目开发周期管理、广告排期管理等场合。

react, calendar

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7884
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

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} />
    );
  }

return (
    <nav className="calendar--days">
      {labels.concat()}
      {days.concat()}
    </nav>
  );
};

class Calendar 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="calendar">
        <Heading date={date} changeMonth={(month) => this.changeMonth(month)} resetDate={() => this.resetDate()} />

<Days onClick={(date) => this.changeDate(date)} date={date} startDate={startDate} endDate={endDate} />
      </div>
    );
  }
}

ReactDOM.render(
  <Calendar />,
  document.getElementById('calendar')
)

编译

CSS

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f7fa;
    color: #333;
}
.calendar {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -195px;
    width: 360px;
    padding: 15px;
    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
}
.calendar--nav {
    margin: -15px -15px 15px;
    padding: 0 15px;
    background-color: #b670f4;
    color: #fff;
    height: 70px;
    position: relative;
}
.calendar--nav a {
    position: absolute;
    cursor: pointer;
    left: 10px;
    font-size: 32px;
    line-height: 1;
    top: 16px;
    width: 30px;
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 0.4);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.calendar--nav a:hover {
    color: #fff;
}
.calendar--nav a:last-child {
    left: auto;
    right: 10px;
}
.calendar--nav h1 {
    margin: 0;
    position: absolute;
    left: 40px;
    right: 40px;
    text-align: center;
    cursor: pointer;
    font-weight: 400;
    font-size: 30px;
    line-height: 66px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.calendar--nav small {
    font-weight: 300;
    font-size: 60%;
}
.calendar--days {
    font-size: 0;
}
.calendar--days span {
    width: 14.28571%;
    display: inline-block;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    margin: 8px 0;
    line-height: 34px;
    position: relative;
    font-size: 16px;
}
.calendar--days span.label {
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.3);
    font-size: 14px;
    cursor: initial;
}
.calendar--days span.active {
    font-weight: 700;
    background-color: rgba(182, 112, 244, 0.05);
    border-radius: 12px;
}
.calendar--days span.muted {
    color: rgba(0, 0, 0, 0.3);
}
.calendar--days span.between {
    border-radius: 0;
}
.calendar--days span.start,
.calendar--days span.between,
.calendar--days span.end {
    background-color: #b670f4;
    color: #fff;
}
.calendar--days span.start {
    border-radius: 12px 0 0 12px;
}
.calendar--days span.end {
    border-radius: 0 12px 12px 0;
}
.calendar--days span.start.end {
    border-radius: 12px;
}
.calendar--days span.between:nth-child(7n):after,
.calendar--days span.start:nth-child(7n):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    background-color: #b670f4;
    width: 20px;
}
.calendar--days span.between:nth-child(7n + 1):after,
.calendar--days span.end:nth-child(7n + 1):after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    background-color: #b670f4;
    width: 20px;
}
.calendar--days span.start.end:after {
    display: none;
}

HTML

React date range picker 常用于项目开发周期管理、广告排期管理等场合。

react, calendar

编辑器支持Emmet

快捷键

React date range picker 常用于项目开发周期管理、广告排期管理等场合。

react, calendar

Datepickk.js 一款很棒的日期选择器插件

使用ReactJS实现的一款图片轮播界面组件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：