标签: react-datepicker

因此，基本上我该如何添加CSS类？我已经试过了，但是没有用：

<DatePicker 
       className="form-control 
       dateInput" 
       selected={startDate}  
       onChange={function(date){
                    startDate = date;
                 }
       }
/>

谢谢，爱德。（顺便说一下，它是使用webpack编译的。）

我正在使用react-datepicker，但由于某种原因，我们不想在下拉列表中显示月份和年份。

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    peekNextMonth
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
/>

还有其他方法可以显示月份和年份吗？

我正在使用react-datepicker NPM软件包，
我尝试遵循文档，但无法导入

registerLocale 

和

setDefaultLocale

从 react-datepicker

看到我犯错了吗？

 import DatePicker from 'react-datepicker';



...
    <DatePicker
            { ...this.props }
            dateFormat={ this.dateFormat }
            ref={ (node) => { this.ref = node; } }
            onClickOutside={ this.clickOutside }
          />
...

这是我要导入语言环境的代码。

我正在尝试创建一个 React-datepicker；但是，我收到此错误：

范围错误：无效的时间值

我添加了一个dateFormat来匹配我的日期变量；但是，我仍然遇到相同的错误？

我究竟做错了什么？

import DatePicker from "react-datepicker";

let date = moment(dateString).format('MMMM d, YYYY h:mm a'); // January 3, 2019 12:30 pm

<DatePicker
    selected={date}
    onChange={this.handleInputChange}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="MMMM d, YYYY h:mm a"
    timeCaption="time"
/>

我也试过dateFormat="MMMM d, yyyy h:mm aa"。

我试图让 react datepicker 的日期选择弹出框从材质 UI 菜单项打开。

我已将菜单项设为 react datepicker 输入字段。问题是我的输入字段是选择日期弹出框的锚点，弹出框在我的菜单中打开。我希望弹出窗口在菜单上方打开。

react datepicker 文档没有很多关于 popover 位置的信息。知道如何实现这一目标吗？

这是弹出窗口被“困住”在菜单中的不需要行为的屏幕截图

我的菜单代码的快速概览：

// this icon is the anchor for the menu
<MoreIcon onClick={handleClick} />
<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  //this is my Date picker component
  <Reschedule handleReschedule={handleReschedule} />
</Menu>

和我的日期选择器组件（使用自定义输入字段作为菜单项）：

export const Reschedule = ({ handleReschedule }) => {
  // ref to the datePicker to control open/close
  const calendar = createRef();

  //to Open the date picker
  const openDatepicker = (e) => {
    calendar.current.setOpen(true); …

我有一种情况，我应该在react-datepicker组件中更改默认情况下可用的导航箭头。

我发现并尝试了什么？

我发现日期选择器使用button标签并使用类来应用图标，如下所示：

<button type="button" class="react-datepicker__navigation react-datepicker__navigation--previous react-datepicker__navigation--previous--disabled"></button>
<button type="button" class="react-datepicker__navigation react-datepicker__navigation--next"></button>

我尝试使用右侧/下一个导航按钮上的预期图像实现背景：

.react-datepicker__navigation--next {
    background: url(../images/rightArrow.png) no-repeat !important;
    right: 10px;
    width: 15px;
}

但它不起作用。

任何人都可以帮助我更改导航图像上的图像吗？

注意：我检查了 react-datepicker 文档和其他 SO 查询，但到目前为止还没有找到任何相关的帮助。

我知道这个集合应该在 Date 对象上执行，但即使我在 Date 对象上执行。ReactDatepicker 根本不起作用。

• 第 12:3 行：'setHours' 未定义 no-undef

• 行 12:12: 'setMinutes' 未定义 no-undef

• 行 43:9: 'setHours' 未定义 no-undef

• 行 43:18: 'setMinutes' 未定义 no-undef

• 行 44:9: 'setHours' 未定义 no-undef

• 行 44:18: 'setMinutes' 未定义 no-undef

• 行 45:9: 'setHours' 未定义 no-undef

• 行 45:18: 'setMinutes' 未定义 no-undef

• 行 46:9: 'setHours' 未定义 no-undef

• 行 46:18: 'setMinutes' 未定义 no-undef

        const [startDate, setStartDate] = useState(
          setHours(setMinutes(new Date(), 30), 16)
        );
        return (
          <DatePicker
            selected={startDate}
            onChange={date => setStartDate(date)}
            showTimeSelect
            excludeTimes={[
              setHours(setMinutes(new Date(), 0), 17),
              setHours(setMinutes(new …

我在我的项目中使用 react-datepicker。
我只需要显示特定月份的天数（比如 2020 年 2 月）。我的印象是我可以将 iso 日期作为 minDate 和 maxDate 传递，但这似乎不起作用。

我的代码：

   const DatePickerMod = () => {
    const [startDate, setStartDate] = useState(null);
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      minDate={'02-01-2020'}
      maxDate={'02-29-2020}
      placeholderText="Select a date in February 2020"
    />
  );
  };

我正在使用 HackerOne 的这个模块： https: //reactdatepicker.com

将模块安装并导入到我的项目后，我决定从站点中选择“选择时间”组件。

我的代码

import React, { Component } from "react";
import { Form, Button } from "react-bootstrap"
import DatePicker from "react-datepicker"

export default class AddEventModal extends Component {

    constructor(props) {
        super(props)

        this.state = {
            date: new Date()
        }
    }

    render() {
        return (
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Title <span style={{ color: "red" }}>*</span></Form.Label>
                    <Form.Control type="text" placeholder="Enter a Title" className="col-6" />
                    <Form.Text className="text-muted">
                        Enter a Title for your Event.
                        </Form.Text>
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Description</Form.Label>
                    <Form.Control type="text" placeholder="Enter a …

我正在使用react-datepicker，但无法获取 中的实际日期onChange。

这是我的组件：

import DatePicker from "react-datepicker";\n\nconst DatePick = () => {\n  return (\n    <DatePicker\n      locale="fr"\n      dateFormat="dd/MM/yyyy"\n      onChange={(date) => {\n        console.log(date);\n      }}\n    />\n  );\n};\n\nexport default DatePick;\n

在 console.log 中我得到了这种 string Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d\xe2\x80\x99Europe centrale)。

我需要获取日期dd-MM-yyyy或onChange可以格式化并稍后在表单中使用的日期并提交其值。