Question

我想知道是否有一个日历组件可以让我在选择一天时将整周标记为选中（如日期范围）？

当用户在日历中选择一天并在日历中标记时，我们的想法是获得从一周开始到一周结束的范围。

任何帮助将不胜感激。

Answer 1

很容易实现

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import moment from 'moment'

class App extends Component {
  constructor() {
    super();
    this.state = {
      date: moment()
    };
  }
  handleDateChange = (e) => {
    this.setState({date: e.target.value}, ()=>{
      console.log(moment(this.state.date).startOf('week').toISOString()); //week start date
      console.log(moment(this.state.date).endOf('week').toISOString()) //week end date
    })

  }

  render() {
    return (
      <div>
        <input 
          type="date" 
          value={this.state.date} 
          onChange={this.handleDateChange}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

在这里查看（确保打开控制台）https://stackblitz.com/edit/react-kfhmva

你得到2个日期：开始，结束一周。您可以根据需要在任何日期范围选择器和标记范围内使用它。

Answer 2

有一个很棒的套餐，你可以在这里查看https://github.com/airbnb/react-dates

我可以在http://airbnb.io/react-dates/

查看不同的选项

日历反应组件 - 选择一天时标记一周

2 个答案: