标签: react-datepicker

这是组件：

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';

class DatePickerCreater extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <DatePicker
                disabled={this.props.answer.isDisabled}
                dateFormat="YYYY/MM/DD"
                selected={Date(this.props.answer.value)}
                onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)} 
            />
        );
    }
}

export default DatePickerCreater

当我尝试渲染它时，它什么也没有显示...

非常感谢每个答案！

如果您查看 react-datepicker 的默认实现，则每个月都会突出显示本月的某一天。有没有办法只突出显示/着色当前月份的日期，而不突出显示所有其他月份的日期？

如果您查看第一张图片，8 月 6 日将突出显示，因为它是当前日期。但也强调了 9 月 6 日。

我使用 datepicker 添加项目并且它可以工作，但是当我尝试使用 datepicker 编辑/更新这些项目时，它不起作用！给我很多错误，例如：

• 失败丙类型：无效支柱selected型的string供给DatePicker，预期object

• 组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。

• 失败的道具类型：无效的支柱selected型的string供给Calendar/Month/Week/Day，预计object。

• 未捕获的类型错误：无法读取未定义的属性“值”

并且输入为空，没有像预期的那样显示今天的日期，例如：

这是我的 EditProject 组件：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import './EditProject.css';
import 'react-datepicker/dist/react-datepicker.css';


class EditProject extends Component {
    constructor(props) {
        super(props);
        this.state = {
            project: {}
        }    
    }

    componentDidMount() {

        // console.log('PROPS ' + JSON.stringify(this.props));

        const { match: { params …

我有以下组件：

import React, {Component, Fragment} from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// import PropTypes from 'prop-types';

class Form extends Component {
    state = { 
        selected: new Date()
    }

    handleChange = date => {
        console.log('date: ', date)
        this.setState({
            selected: date
        });
    }

    render() { 
        const {selected} = this.state;
        return (
            <Fragment>
                <form>
                    <DatePicker
                        dateFormat="dd/MM/yyyy" 
                        onChange={this.handleChange} 
                        selected={selected}
                    />
                    <button>search</button>
                </form>
            </Fragment>
        );
    }
}

export default Form;

当我从日期选择器中选择任何日期时，我得到以下格式：

日期：2019 年 5 月 15 日星期三 12:54:33 GMT+0100（英国夏令时）

可以将其解析回如下格式：

2019-05-15/yyyy-mm-dd

因为我需要它以这种格式提交 API …

我在日期选择器中选择了 12:00 Pm，并且还通过控制台记录了它......它显示 Thu Jul 09 2020 12:00:00 GMT+0530（印度标准时间），这是正确的时间。但是当我单击“保存”时，它会发送错误的时间（2020-07-09T06：30：00.454Z）。它比用户选择的时间少发送了 5 个半小时。它应该发送（2020-07-09T012：00：00.454Z）----预期行为我不知道问题是什么以及如何修复我的代码

 <DatePicker
        selected={new Date(value)}
        onChange={(e) => setFieldValue(field.name, e)}
        className={classes.datePicker}
        todayButton="Today"
        {...rest}
      />

我需要通过用户选择的完全相同的时间。我认为此问题是由于时区或 utc 等原因而发生的。所以请帮忙

所以我使用react-datepicker npm插件，我试图在点击它时禁止显示我的手机键盘，因为我的手机键盘占据了整个屏幕，所以很难在移动设备上与日期选择器进行交互

这是我的代码：

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import Label from './Label';
import PropTypes from 'prop-types';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';


const Example = (props) => {
  const [startDate, setStartDate] = useState(null);
  
  return (
    <div className="customDatePickerWidth">
      <Label className={props.className} text={props.label}></Label>
      <DatePicker 
       
        className={""+props.class} selected={startDate} 
        onChange={date => setStartDate(date)} 
        disabledKeyboardNavigation
        placeholderText="dd/mm/yyyy"

        />
    </div>
  );
};
export default Example;