标签: react-datepicker

我在我的应用程序中使用此lib:

https://reactdatepicker.com/

有一个我可以使用的excludeDates道具,我可以传递一个日期列表,即今天和昨天将被排除:

excludeDates={[moment(), moment().subtract(1, "days")]}

我宁愿有一个比传递数百个日期更好的方法.

谢谢!

我有一个表单，用户可以在其中提交一些所需的信息

其中一个字段是出生日期

我正在为该特定字段使用react-datepicker包

一段代码如下所示：

        <label>
          <DatePicker
            autoComplete='off'
            dateFormatCalendar="MMMM"
            showYearDropdown
            scrollableYearDropdown
            onChange={this.handleChange}
            selected={this.state.formData.dob}
            maxDate={moment().subtract(6570, "days")}
            minDate={moment()}
            placeholderText="Date of birth"
            name="dob"
            customInput={
              <Input type='text' onKeyPress={e => e.preventDefault()} validations={[required]} value={this.state.formData.dob} />
            }
          />
        </label>

6570 = 18*365 是从 18 年转换而来的天数，我知道这不是一个固定的天数，因为还有 364 天

这是日期选择器无法选择日期的屏幕截图

https://gyazo.com/4d66a8e59dbca5e79c3af7d6de139d21

有什么想法或建议可以让年满 18 岁的用户提交表单吗？

谢谢你！

我正在使用 expo 构建一个 react-native 应用程序，但是，我有一个错误，因此我无法继续构建该应用程序。我什至在错误消息中提到的 node_modules 中查找文件。我正在使用 react-native-gesture-handler 进行屏幕导航。如果我卸载了 react-native-gesture-handler 并删除了导航代码，这会解决我的错误吗？我该如何解决？

应用程序.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import Plan from './screens/Plan';
import Home from './screens/Home';


const AppNavigator = StackNavigator({
  PlanScreen: { screen: Home },
  HomeScreen: { screen: Plan }
});

export default class App extends Component {
  render() {
    return (
      <AppNavigator/>
    )
  }
}

主页.js

import React, { Component } from 'react';
import { View, Text, Button, TextInput } from 'react-native'; …

我有一个正在运行的单元测试，但是现在我在上添加了一个新程序包react-datepicker，称为，react-text-mask并且尝试对其进行模拟，但是当我运行时它会收到以下消息npm run test：

TypeError：无法读取null的属性“ selectionEnd”

在Object.update（node_modules / react-text-mask / dist / reactTextMask.js：1：9205）

在t.value（node_modules / react-text-mask / dist / reactTextMask.js：1：2431）

在t.value（node_modules / react-text-mask / dist / reactTextMask.js：1：2490）

在commitLifeCycles（node_modules / react-test-renderer / cjs / react-test-renderer.development.js：6427：22）

在commitAllLifeCycles（node_modules / react-test-renderer / cjs / react-test-renderer.development.js：7516：7）

我react-datepicker的react-text-mask：

<RCDatePicker
        {...rest}
        locale="pt-BR"
        selected={value}
        onChange={onChange}
        readOnly={readOnly}
        dateFormat={dateFormat}
        minDate={minDays ? moment(baseDate).subtract(minDays, 'days') : undefined}
        maxDate={maxDays ? moment(baseDate).add(maxDays, 'days') : undefined}
        disabled={disabled}
        customInput={<MaskedInput
          mask={[/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /[1-2]/, /\d/, …

背景

我正在使用一个使用ReactJS作为渲染库的Meteor应用程序.

目前,我在更新数据时重新渲染子组件时遇到问题,即使父级正在访问更新的数据并且据称将其传递给子级.

Parent组件是一个数据表.子组件是单击编辑日期字段.

它(理论上)的工作方式:父组件将日期的现有数据作为prop传递给子组件.子组件获取现有的道具数据,处理它并使用它设置一些状态,然后有2个选项:

• 默认:显示数据
• 如果用户点击数据字段:更改为输入并允许用户选择日期(使用react-datepicker),更改状态 - 当用户在字段外单击时,触发返回仅显示并将更新的数据从状态保存到数据库

我在表中每行使用子组件两次,每次使用它时,它需要访问数据库中的最新日期数据.因此,如果数据在一个字段中更改,则第二个字段应反映该更改.

问题

除非我手动刷新页面并强制子组件使用新数据进行渲染,否则第二个字段不会反映数据库中的更改.编辑的字段是反映数据的变化,因为它反映了什么是存储在状态.

阅读完React文档之后,我确定问题是因为日期是作为一个prop进入,然后作为一个状态处理 - 并且因为该组件不会从prop更改中重新呈现.

我的问题

我该怎么做才能解决这个问题？

我对文档所做的所有阅读强烈建议远离诸如forceUpdate()和getDerivedStateFromProps()之类的东西,但结果我不确定如何通过我想要的方式传递数据.

思考？

我的守则

我已经将代码缩减了一点并删除了特定于我的项目的变量名称,但是如果它有帮助我可以提供更多的实际代码.我认为我的问题比直接调试更具概念性.

亲

ParentComponent () {
    //Date comes as a prop from database subscription
    var date1 = this.props.dates.date1 
    var date2 = this.props.dates.date2
    return(
        <ChildComponent 
            id='handle-date-1'
            selected={[date1, date2]} />
        <ChildComponent 
            id='handle-date-2'
            selected={[date1, date2]} />
    )
}

儿童

ChildComponent() {
    constructor(props) {
        super(props);
        this.state = {
            date1: this.props.selected[0],
            date2: this.props.selected[1],
            field: false,
        };
    }

    handleDatePick() {
        //Handles the …

目前，在react-datepicker中，我在客人详细信息表单中使用月份选择器和年份选择器作为出生日期。

发生的情况是：- 所选日期在日历上突出显示，这很好。

我需要实现的内容：- 当我更改日历上的月/年时，我想将所选日期更新为与更新月/年之前相同的日期。

请帮助我任何可能性。

我无法找到解决方案。

以下代码是我当前用于react-datepicker的代码：

    <DatePicker
        className="date-field ub-l"
        openToDate={new Date("1993/09/28")}
        selected={this.state.date}
        onSelect={this.handleChange}
        onChange={this.handleChange} //only when value has changed
        maxDate={new Date()}
        placeholderText={this.props.placeholder}
        disabledKeyboardNavigation={true}
        showMonthDropdown={true}
        showYearDropdown={true}
        name={this.props.name}
        disabledNavigation
        inputProps={{readOnly: true}}
        dropdownMode="select"
        autocomplete={false}
    />

如果我更改月/年，在选择任何日期之前是否可以自动使用更新的月/年来更新所选日期？

我创建了以下组件来在 UnForm 中选择日期：

export default function DatePickerInput({ name, ...rest }) {
  const datepickerRef = useRef(null);
  const { fieldName, defaultValue = '', registerField } = useField(name);

  const [date, setDate] = useState(defaultValue || null);
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      path: 'props.selected',
    });
  }, [fieldName, registerField]);

  return (
    <Label htmlFor={fieldName}>
      <UnInput>
        <ReactDatePicker
          ref={datepickerRef}
          selected={date}
          onChange={setDate}
          dateFormat="dd/MM/yyyy"
          placeholderText="dd/mm/aaaa"
          writable="true"
          {...rest}
        />
      </UnInput>
    </Label>
  );
}

为了保存记录，组件正常工作，加载并保存我选择的日期。当我要编辑记录时，尝试在初始加载中加载日期时，页面损坏并显示以下错误：

Unhandled Rejection (TypeError): Cannot assign to read only property 'selected' of object '#<Object>'

如果我注释掉该行path: …

我目前正在尝试将自定义标头添加到我的反应日期选择器日历中。但是，我的日历也显示多个月份，因此当我使用 renderCustomHeader 属性时，它只会向显示的第一个日历添加自定义标题，而第二个日历最终没有标题。

目前的代码如下所示：

<DatePicker
        renderCustomHeader={({
            date,
            changeYear,
            changeMonth,
            decreaseMonth,
            increaseMonth,
            prevMonthButtonDisabled,
            nextMonthButtonDisabled
        }) => (
            <div
                style={{
                    margin: 10,
                    display: 'flex',
                    justifyContent: 'center'
                }}
            >
                <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
                    {'<'}
                </button>
                <select
                    value={date.getFullYear()}
                    onChange={({ target: { value } }) => changeYear(value)}
                >
                    {years.map(option => (
                        <option key={option} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
    
                <select
                    value={months[date.getMonth()]}
                    onChange={({ target: { value } }) =>
                        changeMonth(months.indexOf(value))
                    }
                >
                    {months.map(option => (
                        <option key={option} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
    
                <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
                    {'>'}
                </button>
            </div> …

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

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

我尝试过更改日期格式

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
    />
  );
};