标签: react-datepicker

是否可以将 react-datepicker 与 react hooks 形式一起使用？我尝试了以下示例：

https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark

但没有运气。

import React, { useState } from "react";
import "./styles.css";
import { useForm } from "react-hook-form";
import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap";
import DatePicker from "react-datepicker";

export default function App() {
  const { register, handleSubmit } = useForm();
  const [startDate, setStartDate] = useState();
  const [result, setResult] = useState();

  const onSearch = event => {
    setResult(event);
  };

  return (
    <div className="App">
      <Form onSubmit={handleSubmit(onSearch)}>
        <Row>
          <Col>
            <FormGroup>
              <Input
                type="number" …

我正在使用react-datepicker和date-fns在我的网络应用程序中显示带有匈牙利语言环境的日期选择器，但我找不到一种方法让它显示从星期一开始的一周日期，而不是按照匈牙利惯例从星期日开始。日期选择器看起来像这样（V 是 Vas\xc3\xa1rnap 的缩写，这当然意味着星期日）：

这是我用来渲染它的代码：

import DatePicker, { registerLocale } from "react-datepicker";\nimport "react-datepicker/dist/react-datepicker.css";\nimport hu from "date-fns/locale/hu";\n\nregisterLocale("hu", hu);\n\nexport function CustomDatepicker(props) {\n    return (\n        <DatePicker className="form-control" selected={props.date} \n        onChange={ props.onChange } dropdownMode="select"\n        dateFormat="yyyy.MM.dd." todayButton="Ma" closeOnScroll={true}\n        locale="hu" />\n    );\n}\n

我还尝试实现这项工作的一个想法是我在这个 GitHub 问题中找到的以下代码（将数字 0 修改为 1）：

registerLocale("hu", { ...hu, options: { ...hu.options, weekStartsOn: 1 } });\n

有没有其他方法可以完成这项工作，或者我应该使用不同的包进行本地化？

我正在使用react-datepicker让用户选择日期.但是,现在它使用本地时间(PDT),但我想硬编码它以使用特定的时区(PST).

我尝试使用utcOffset道具,但它似乎没有做任何事情.有谁知道如何做到这一点？

我正在使用 react-datepicker npm 模块，当我部署构建时，它的样式被破坏了（未应用样式），它在本地环境中运行良好。

我已经像这样导入了它的样式： import 'react-datepicker/dist/react-datepicker.css';

我找到了像这样导入的地方： import './../../node_modules/react-datepicker/dist/react-datepicker.css';

它也不起作用。

我认为这可能是 SSR 的原因，所以我删除了该组件的 SSR，但也没有使用 CSR。

当前结果

想要的结果

这是我的组件代码：

 import React from 'react';
 import DatePicker from 'react-datepicker';

 import calendarIcon from './../../assets/images/calendar-icon.svg';

 import 'react-datepicker/dist/react-datepicker.css';
 // import 'react-datepicker/dist/react-datepicker-cssmodules.min.css';
 import './Datepicker.scss';

 const Datepicker = ({ datepickerClassName, datepickerStyle, 
 selectedDate, datepickerInputClassName, handleChange }) => (
       <div className={`datepicker d-flex align-center 
           ${!!datepickerClassName ? datepickerClassName : ''}`}
           style= {datepickerStyle}
       >
       <span className='d-flex align-center icon-container'>
           <img src={calendarIcon} className='icon' />
       </span>

       <DatePicker
            placeholderText='DD/MM/YYYY'
            dateFormat='dd/MM/yyyy'
            id='start-date'
            autoComplete='off'
            selected={selectedDate}
            className={datepickerInputClassName}
            onChange={handleChange}
        /> …

我试图在react-datepicker组件中实现限制或验证.我使用redux-form进行验证和规范化(实现限制)

https://redux-form.com/6.0.0-rc.1/examples/normalizing/

问题:我观察到当我们尝试在字段中输入内容时,不会调用redux-form的规范化函数和验证函数

虽然我们提交表单时未提交此值,但我需要显示一些验证错误或限制用户输入无效字符.

我为日期选择器组件创建了一个包装器,并通过redux字段在我的表单中使用它

我的日期选择器组件: -

return (
      <div className={"render-date-picker "}>
        <div className="input-error-wrapper">
          {(input.value) ? <label> {placeholder} </label> : ''}
          <DatePicker className="input form-flow" {...input}
            placeholderText={placeholder}
            selected={input.value ? moment(input.value) : null}
            maxDate={maxDate || null}
            minDate={minDate || null}
            dateFormat={isTimePicker ? "LLL" : "DD/MM/YYYY"}
            showYearDropdown
            showMonthDropdown
            disabledKeyboardNavigation
          />

          {touched && error && <span className="error-msg">{t(error)}</span>}
          <span className="bar" style={{ 'display': this.state.is_focus ? 'block' : 'none' }} ></span>
        </div>
      </div>
    );

redux表格字段: -

<Field
 name="date_of_birth"
 type="text"
 className="input form-flow extra-padding-datepicker"
 component={RenderDatePicker}
 maxDate={moment().subtract(18, "years")}
 validate={[required, …

我想改变react-datepicker的风格：

1.将输入框改为自定义样式

2.更改日历的样式和语言

我看到一篇文章（Datepicker 上的自定义输入字段，[react-datepicker 组件] https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md）谈论替换整个组件。我可以直接编辑样式而不需要编写新组件吗？如果是，我怎样才能实现这一目标？而且，我不知道如何更改日历。我怎样才能知道我应该更改哪个组件？

import React, {Component} from 'react';
import {render} from 'react-dom';

import moment from 'moment';

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const Input = ({onChange, placeholder, value, isSecure, id, onClick}) => (
    <input
        style={{backgroundColor:"black"}}
        onChange={onChange}
        placeholder={placeholder}
        value={value}
        isSecure={isSecure}
        id={id}
        onClick={onClick}
    />
);

const NoClickInput = ({onClick, ...props}) => <Input {...props} />;

class App extends Component {
    state = {
        startDate: moment(),
        endDate: moment()
    };

    render() {
        const {startDate, endDate} = this.state;
        return …

我正在为我的表单使用 React 日期选择器。目前它运行良好，但用户可以删除日期并输入任何值。我该如何限制它？

这是我的代码：

import DatePicker from "react-datepicker";

    <DatePicker
    name="invoiceDate"
    className="form-control form-control-sm"
    type="text"
    size="sm"
    placeholder=""
    selected={date}
    minDate={new Date()}
    value={values.setDate}
    onChange={datePickerChange}
    dateFormat="dd/MM/yyyy"
    />

目前正在尝试将 React 和 Typescript 与 React-datepicker 结合使用。

我有一个简单的设置想要测试，但我不断收到以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

DatePicker下面是使用该包的文件

import * as React from 'react';
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

interface DateConstructor  {
    startDate: Date;
} 

export class DateSelector extends React.Component<{}, DateConstructor > {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date()
        };
    }

    private handleChange(date) {
        this.setState({
            startDate: date
        });
    }

    public render() {
        const { startDate …

我正在使用react-datepicker，但由于某种原因它显示容器后面的日历。

我努力了：

.react-datepicker-popper {
  z-index: 9999 !important;
}

但它不起作用。

这是日期选择器组件

<DatePicker
     selected={startDateSingleDay}
     onChange={onChangeDatePickerStartDateSingleDay}
     dateFormat="yyyy-MM-dd"
     className="text-center"
     showMonthDropdown
     showYearDropdown
     dropdownMode="select"
     onChangeRaw={handleDateChangeRaw}
     popperClassName="date-picker-reports"
     placeholderText="Choose a date"
   />

有什么建议么？

我正在使用React Datepicker，一切都很好。

而不是在一周中的几天使用“Su”“Mo”“Tu”等，我想使用这样的东西：

"Sun" "Mon" "Tue" 

我正在通过 css 完成此操作：

.react-datepicker__day-name {
    ...
    &:first-child {
        &:after {
            visibility: visible;
            position: relative;
            left: -0.5rem;
            text-align: center;
            content: "Sun";
        }
    }
}

它似乎有效，但似乎也很“hacky”。是否有我在某处缺少的配置选项可以指定我想使用的格式？

感谢您的任何建议！

编辑

这是我（尝试）将 传递dateFormat给我的组件的方式：

应用程序.js

this.state = {
    startDate: new Date(),
    dateFormat: 'ddd'
};


...

render() {
    ...
     <ReservationCalendar
         dateFormat={ this.state.dateFormat }
         startDate={ this.state.startDate  }
     />
}

预订日历.js

const ReservationCalendar = ({dateFormat, startDate}) => (
    <Calendar
        dateFormat={ dateFormat }
        startDate={ startDate }/>
);

export default ReservationCalendar; …