React DatePicker Bootstrap 是最新的

Posted 2023-05-07

【中文标题】React DatePicker Bootstrap 是最新的

【英文标题】：React DatePicker Bootstrap up to date

【发布时间】：2016-09-30 08:40:09

【问题描述】：

我使用bootstrap 风格在React 中搜索了一个好的datepicker。但是我发现的所有东西都不能正常工作或不是最新的......

我正在使用 React 15.0.2 和 Boostrap 3.3.6

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

【参考方案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 />

【讨论】：

这很容易！

为什么他们的网站上没有记录这个功能？太棒了。

这是迄今为止我找到的最好的解决方案。

【参考方案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;

【参考方案3】：

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

【讨论】：

您好，感谢您的回复。我试过了，但我遇到了一些问题......第一个 css 似乎没有加载，但我在我的 gulp.babel.js 文件中添加了一个引用。第二，当我点击日期选择器中的某个日期时，会显示一些错误（未捕获的 TypeError：t.isSame 不是函数）（未捕获的不变违规：performUpdateIfNecessary：意外的批号（当前 5，待处理 4）你有什么想法吗？

css 必须包含在您的 index.html 中并包含在脚本标记中

moment 用法可能有错误：***.com/questions/28335803/…。你用moment了吗？

在我的项目中 css（用于组件）不能放在 index.html 中，而是在 gulp.babel.js 中引用。不过不管怎样，谢谢你的回复，我自己去找。

是的，我使用 Moment，我会检查一下

【参考方案4】：

就像 ravthiru 所说的那样，带有 "data" 和 "time" 类型的 react-bootstrap form controls 将是最容易使用的，并且不需要任何额外的包。

使用material-ui pickers 是一种更流畅、更完整、可定制但更重的替代方案@ 你可以试试here