React DatePicker Bootstrap是最新的

Question

我使用datepicker样式在React中搜索了一个好bootstrap。但是我发现的一切都运作良好或者不是最新的......

我正在使用React 15.0.2和Boostrap 3.3.6

有没有人知道一个好的datepicker组件？

Answer 1

如果您使用的是 react bootstrap，您可以尝试 type="date" ，您可以在 react-bootstrap

找到更多信息

import Form from "react-bootstrap/Form";

....

<Form.Control type="date" name='date_of_birth' error={errors.date_of_birth} ref={register} />

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-datetimepicker。然而，如果你使用bootswatch主题，它需要CSS添加。此外，它可能需要一些z-index调整，具体取决于您显示它的位置。否则它工作正常。