React DatePicker Bootstrap 已更新到最新

Question

我使用

datepicker

风格在

React

中搜索了一个好的

bootstrap

。但我发现的一切都不能正常工作或不是最新的......

我正在与

React 15.0.2

和

Boostrap 3.3.6

合作

有人知道一个好的

datepicker

组件吗？

Answer 1

如果您使用的是react-bootstrap，则可以将

type="date"

添加到

<Form.Control>

。更多信息请访问 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date。

但是您应该注意

<input type="date">

每个浏览器的实现方式都不同！

import Form from "react-bootstrap/Form";
    
....
    
<Form.Control type="date" />

没有反应引导

<input type="date" class="form-control" />

Answer 2

我正在使用

react-bootstrap

并注意到许多 npm 包无法工作和/或不能满足我的设计。所以我编写了自己的组件，仅依赖于react-bootstrap/Button，但是你可以更改为常规html

<button>

。

import { useState, useMemo } from 'react';
import Button from 'react-bootstrap/Button';

const weekDays = { nl: ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'] };

const FollowUp = ({ selectedDate, onChange }) => {
  const [showDate, setShowDate] = useState(new Date(selectedDate));

  // first day of the month, CAREFULL: object will change by for loop!
  const firstDayThisMonth = new Date(showDate.getFullYear(), showDate.getMonth(), 1);
  // getDay sunday=0 and we monday=0
  const dayOfWeek = (firstDayThisMonth.getDay() + 6) % 7;
  // first day of next month
  const firstDayNextMonth = new Date(showDate.getFullYear(), showDate.getMonth() + 1, 1);

  // loop whole month and keep in memo to save 1ms per time
  const month = useMemo(() => {
    const m = [];
    for (let d = firstDayThisMonth; d < firstDayNextMonth; d.setDate(d.getDate() + 1)) {
      m.push(new Date(d));
    }
    return m;
  }, [showDate]);

  return (
    <div className="hl-followus">
      <div className="hl-month d-flex flex-wrap flex-row align-items-baseline justify-content-between px-3 pt-3 bg-primary text-light">
        {selectedDate.getFullYear()}
      </div>
      <div className="hl-month d-flex flex-wrap flex-row align-items-baseline justify-content-between px-3 pb-3 bg-primary text-white h2">
        {selectedDate.toLocaleString('nl-nl', {
          weekday: 'short',
          day: 'numeric',
          month: 'long',
        })}
      </div>
      <div className="hl-month d-flex flex-wrap flex-row align-items-baseline justify-content-between px-2 py-2">
        <Button
          onClick={() => setShowDate(new Date(showDate.setMonth(showDate.getMonth() - 1)))}
          className={`hl-day-button rounded-circle p-0 hl-bc1 border-white'}`}
          variant="light"
        >
          <i className="fas fa-chevron-left" />
        </Button>
        <div className="h5">
          {showDate.toLocaleString('nl-nl', { month: 'long', year: 'numeric' })}
        </div>
        <Button
          onClick={() => setShowDate(new Date(showDate.setMonth(showDate.getMonth() + 1)))}
          className="hl-day-button rounded-circle p-0 hl-bc0 border-0"
          variant="light"
        >
          <i className="fas fa-chevron-right" />
        </Button>
      </div>
      <div className="hl-month d-flex flex-wrap flex-row">
        {weekDays.nl.map((weekDay) => (
          <div key={weekDay} className="hl-day  d-flex justify-content-center">
            <small>{weekDay}</small>
          </div>
        ))}
      </div>
      <div className="hl-month d-flex flex-wrap flex-row  ">
        <div style={{ width: `${dayOfWeek * 14.28}%` }} />
        {month.map((day) => {
          const highlightSelectedDate =
            selectedDate &&
            selectedDate.getDate() === day.getDate() &&
            selectedDate.getMonth() === day.getMonth() &&
            selectedDate.getYear() === day.getYear();
          return (
            <div key={day} className="hl-day d-flex justify-content-center">
              <Button
                onClick={() => onChange(day)}
                className={`hl-day-button rounded-circle p-0 ${!highlightSelectedDate &&
                  'hl-bc0 border-0'}`}
                variant={highlightSelectedDate ? 'primary' : 'light'}
              >
                {day.getDate()}
              </Button>
            </div>
          );
        })}
      </div>
      <style jsx>
        {`
          .hl-month {
            width: 350px;
          }
          .hl-day {
            flex: 0 0 14.28%;
          }
          .hl-followus :global(.hl-day-button) {
            width: 36px;
            height: 36px;
          }
        `}
      </style>
    </div>
  );
};

export default FollowUp;

Answer 3

使用类型作为日期来反应引导程序：

从“react-bootstrap/Form”导入Form； 从“react”导入{useState}；

export default function App() {
  const [date, setDate] = useState(new Date());
  return (
    <div className="App">
     
              <Form.Control
                type="date"
                name="datepic"
                placeholder="DateRange"
                value={date}
                onChange={(e) => setDate(e.target.value)}
              />
          
    </div>
  );
}

Answer 4

我使用 react-bootstrap-datetimepicker 效果很好。然而，如果您使用 bootswatch 主题，则需要添加 CSS。此外，它可能需要一些 z-index 调整，具体取决于您显示它的位置。否则它工作得很好。

Answer 5

编辑（2024 年 11 月 29 日）：删除了损坏的链接

我个人喜欢react-date-range，它是非常可定制的。 虽然没有维护，但仍然很受欢迎。