标签: react-datepicker

我正在使用react-datepicker我们的日历控件。现在的问题是，如果用户输入的日期无效，例如“ djfdjfhjkhdf”，则在此控件中没有可以验证的日期。因此，我决定编写自己的验证函数，如果日期无效，则在模糊事件中调用该函数，然后清除用户输入的文本。我的代码是这样的：

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
focousOut(value) {
 this.handleChange('');
}
handleChange(date) {
 this.setState({ selectedValue: date });
 this.setState({ startDate: date });
}

<DatePicker
 selected={this.state.selectedValue}
 value={this.state.startDate}
 onChange={this.handleChange}
 onBlur={event => this.focousOut(event.target.value)} />

validateDate是一个将返回的函数，true或者false，如果日期有效，则true返回false。我怎样才能达到这一要求，请您能帮助我吗？

我有 6 个使用 React-Datepicker 的表单输入。我需要使用 handleChange() 来 setState 6 次，但我不明白如何从每个表单输入动态获取 name 属性，因为“date”在通过函数传递时不包含任何其他数据。我试过传递“名称”，但它不起作用。handleSelect() 也是如此

this.state = {
  dateOne: new Date(),
  dateTwo: new Date(),
  dateThree: new Date(),
  dateFour: new Date(),
  dateFive: new Date(),
  dateSix: new Date()
}

handleChange(date) {
  this.setState({ ...this.state, ?????: date });
}

handleSelect(date) {
  this.setState({ ...this.state, ?????: date });
}

<form>
  <DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateTwo"
    selected={this.state.dateTwo}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateThree"
    selected={this.state.dateThree}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
 <DatePicker
    name="dateFour"
    selected={this.state.dateFour}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateFive"
    selected={this.state.dateFive}
    onSelect={this.handleSelect} …

我正在使用react-datepicker。

我在一行中有两个日期选择器，它在桌面屏幕上运行良好，但是在移动屏幕上使用它时，日历从右侧剪切，因为它没有从右侧获得足够的空间。

此外，它也没有显示滚动条来滚动到右侧。

下图是它在手机上的样子。

我正在尝试以Formik形式使用react-datepicker。

我有：

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


class Fuate extends React.Component {
    state = {
        dueDate: new Date()

    }

<Formik
                initialValues={initialValues}
                validationSchema={Yup.object().shape({
                    title: Yup.string().required("A title is required "),
                })}

                onSubmit={this.handleSubmit}

                render={({ 
                    errors, 
                    status, 
                    touched, 
                    setFieldValue,
                    setFieldTouched, 
                    handleChange, 
                    handleBlur,
                    handleSubmit, 
                    isSubmitting, 
                    dirty, 
                    values 
                }) => {

                return (
                    <div>
            ...

<DatePicker
                                            name={'dueDate'}
                                            value={values['dueDate']}
                                            onChange={e => setFieldValue('dueDate', e)}
                                        />
                                        <DatePicker
                                        style={{ width: 180 }}
                                        date={values.dueDate}
                                        mode="date"
                                        format="YYYY-MM-DD"
                                        minDate={Date.now.toString()}
                                        maxDate="2050-06-01"
                                        confirmBtnText="Confirm"
                                        cancelBtnText="Cancel"
                                        showIcon={false}
                                        customStyles={{
                                            dateInput: {
                                            marginLeft: 0,
                                            borderColor: "#fff"
                                            }
                                        }} …

我正在关注react的Ionic 教程。我创建了教程页面，我正在尝试向其中添加一个日期选择器元素。这是我现在的页面：

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React, { useState } from 'react';
import DatePicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";

const Home: React.FC = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        The world is your oyster 14.
        <p>
          If you get lost, the{' '}
          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">
            docs
          </a>{' '}
          will be your guide.
        </p>
        <DatePicker …

我还需要从反应日期选择器中选择秒。我浏览过文档发现了这个

在此解决方案中，我可以从中选择小时、分钟、上午/下午，但没有秒选项是否有任何方法可以自定义也从中选择秒。需要帮助，如下示例（查找输入时间）

我尝试过更改日期格式

dateFormat="MM/dd/yyyy h:mm:ss aa" 不起作用

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      timeInputLabel="Time:"
      dateFormat="MM/dd/yyyy h:mm aa"
      showTimeInput
    />
  );
};

我找到了显示秒数的方法，但这工作正常，但在我们选择时间后整个对话框正在关闭的模型内。我在 MaterialUi 对话框中使用它

() => {
  const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomTimeInput = ({ value, onChange }) => (
    <input
      type="time"
      step="1"
      value={value}
      onChange={e => onChange(e.target.value)}
      style={{ border: "solid 1px pink" }}
    />
  );
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />
  ); …

即使我们可以在文档react-datepickeryear dropdown中看到同样的问题。我知道这是版本特定的问题，因为它在较低版本中工作正常。这个版本有解决办法吗？

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showYearDropdown
      dateFormatCalendar="MMMM"
      yearDropdownItemNumber={15}
      scrollableYearDropdown
    />
  );
};

如果选择，则开始时为空。

当我选择日期 20/04/2022 时

日期选择器显示 20/04/2022

Console.log 显示 2022 年 4 月 20 日星期三 00:00:00 GMT+0200（中欧夏令时间）

但我在表单上的有效负载显示 2022-04-19T22:00:00.000Z

我可以将格式锁定为 UTC 吗？

我正在考虑使用一些双箭头来允许年份滚动，类似于月份滚动。关于如何实现主要目标的其他想法非常受欢迎。

GitHub 链接： https: //github.com/Hacker0x01/react-datepicker

我试图调整react-datepicker输入框的宽度，但令人惊讶的是，那里的信息很少，并且无法影响其宽度。我只想使输入宽度为其包含div的100％。

预期行为

宽度应扩展为其父容器的宽度。

我的反应日期选择器

<div className="myContainer">
  <DatePicker
    className="myDatePicker"
    fixedHeight
    readOnly={true}
    isClearable={false}
    placeholderText="End date"
    selected={this.props.defaultValue}
    onChange={(date) => this.props.handleDateChange(date)}
  />
</div>

预期行为

以下内容应导致其myDatePicker宽度与父对象相同myContainer，但宽度保持不变。

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%;  // note: if I change this value to a fixed value (such as 500px) then the width is effected
}

最近的替代尝试

最接近的尝试是此操作，但它也会影响弹出窗口的宽度，导致其延伸超过整个屏幕的长度，因此这也不能作为解决方案：

.myContainer div {
  width: 100%;
}

实际行为

除非为宽度设置了特定的px值，否则日期选择器将保持相同的长度。

有谁知道如何将react-datepicker的输入宽度设置为100％？

编辑 我相信它不能像典型input字段那样工作的原因是因为它react-datepicker是一个input …