标签: react-datepicker

如何设置最大或最小日期？例如，我只想限制过去2个月（最小日期）直到今天（最大日期）的日间收盘者。因此用户无法选择明天的日期。谢谢

http://react-day-picker.js.org/docs/

我正在使用 react-date-picker，但是在移动设备上，单击时会显示本机键盘，导致日期选择器在顶部打开，这看起来不太好。在线解决方案是将 readonly 属性放在日期选择器绑定的输入字段上。但是 read-date-picker 组件不会让我通过那个道具......

对此有什么好的解决方案吗？

我想在 react JSX 中创建一个年份列表

我有 Jquery 的代码，请看下面。

var minOffset = 0, maxOffset = 60; // Change to whatever you want
var thisYear = (new Date()).getFullYear();
var select = $('<select>');

for (var i = minOffset; i <= maxOffset; i++) {
    var year = thisYear - i;
    $('<option>', {value: year, text: year}).appendTo(select);
}

select.appendTo('body');

http://jsfiddle.net/DhpBg/739/

我正在尝试将所选参数设置为react-datepicker的 DatePicker 的默认日期。我从数据库中获取的基本上日期格式如下：

event_date: "2019-06-15"

当我设置状态时，该日期以这种方式显示 - event_date: "2019-06-15T00:00:00"

我试图new Date()将其转换为与 JavaScript 兼容的日期。也试过MomentJS但它也抛出了同样的错误。当我打电话new Date()的selected参数，然后一切完美。我的意思是，DatePicker 显示默认的今天日期。但是当我尝试将自定义日期值设置为 DatePicker 时，它会引发错误 - RangeError: Invalid time value。

谁能告诉我 DatePicker 设置自定义日期需要什么类型的数据？

我试图将react-date picker与ag-grid合并 ag-grid提供了有关使用自定义日期选择器的文档，但使用 flatpickr 想知道是否有人成功尝试将react-datepicker与ag-grid结合使用，如果是这样，可以提供和示例？

农业网格示例：https ://www.ag-grid.com/javascript-grid/component-date/

当我将主题从默认（白色）切换为黑色时，我必须将反应日期选择器中的弹出器（即日历）的背景颜色更改为黑色和白色字体颜色。

我尝试使用 popperClassName，但无法传递字体颜色和背景颜色，尽管我的占位符已接受给定值并在切换主题时更改其背景。我必须仅以内联方式实现样式（JSS - js/jsx 中的 css）！虽然我已经在外部尝试过占位符的样式。

 <DatePicker
                    selected={startDate}
                    dateFormat={DATE_FORMAT}
                    showMonthDropdown
                    showYearDropdown
                    isClearable
                    todayButton="Today"
                    popperClassName={{ color: fontColor, background }}
                    placeholderText="Click to select date"
                    className={background === '#303030' ? 'placeholderTable' : ''}
                    onChange={(date) => {
                  date = moment(date).format(DATE_FORMAT)
                  if (date === 'Invalid date') {
                    // this means that the user deleted the date
                    // this.setState({ start_date: undefined })
                    this.handleChange({ start_date: undefined, temp_end_date: undefined })
                  } else {
                    // this.setState({ start_date: date })
                    this.handleChange({
                      start_date: date,
                      temp_end_date: moment(date, DATE_FORMAT).add(1, 'year').format(DATE_FORMAT)
                    })
                  }
                }} …

我在我的项目中使用react-datepicker。所需的格式为 mm/dd/yyyy。我想要的是，如果我想输入日期，应该采用日期格式。

例如：我想要日期 1980 年 1 月 21 日。当我从日期选择器中选择时，它的格式正确（01/21/1980）。

现在，如果我输入相同的日期，它不会自动在之间插入斜杠，而是显示日期，如 01211980。

<div className="dashboard-patients-details_row_value">
   <Field name="DateRec" component={Datepicker} disabled={isEditing?false:true}/>
</div>

<div className="datepicker">
   <DatePicker
      selected={value ? moment(value) : null}
      onChange={onChange}
      disabled={disabled}
    />
  <div className="calendar-block">
    <CalendarIcon onClick={this.datepicker}
  />
 </div>
</div>

如何解决这个问题？

我的表单上有 DatePicker；

我正在使用这个包：[ https://reactdatepicker.com/#example-specific-time-range][1]

在选择开始日期上：我想禁用当前时间之前的所有时间。那么如果现在是凌晨 3 点。之前的时间（凌晨 2 点、凌晨 1 点、中午 12 点）将被禁用。

通常，它是这样的：但是这里他们写的是静态时间，我想在那里添加当前时间的当前小时。

<DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      minTime={setHours(setMinutes(new Date(), 0), 17)}
      maxTime={setHours(setMinutes(new Date(), 30), 20)}
      dateFormat="MMMM d, yyyy h:mm aa"
    />

所以我看到了一些关于这个的例子并尝试了这个：

const now = moment().toDate();

<DatePicker
                    selected={this.state.startDate}
                    onChange={event => this.getStartDate(event)}
                    showTimeSelect
                    timeFormat="haa"
                    timeIntervals={60}
                    minDate={now}
                    minTime={now.hours(now.hour()).minutes(now.minutes())}
                    maxTime={now.hours(23).minutes(45)}
                    dateFormat="MM/d/yyyy hhaa"
                    timeCaption="Hour"
                  />

但什么也没发生。我哪里出错了？

我在react-final-form中使用react-datepicker。我正在使用具有多个步骤的模板https://codesandbox.io/s/km2n35kq3v?file=/index.js。问题是我无法将日期选择器集成到组件内。我的代码如下所示：

    return (

        <Field name={props.name} parse={() => true}>
            {props => (
                <DatePicker
                    locale="de"
                    placeholderText="Datum eingeben"
                    selected={startDate}
                    dateFormat="P"
                    openToDate={new Date()}
                    minDate={new Date()}
                    disabledKeyboardNavigation
                    name={props.name}
                    value={startDate}
                    onChange={(date) => setStartDate(date)}
                />
            )}
        </Field>

    );

有谁知道我如何使用它以便数据在表单末尾传递？

此致

我想创建一个日期范围组件，将开始日期和结束日期放入单个输入中。我尝试使用此处的示例https://reactdatepicker.com/#example-date-range-for-one-datepicker但它似乎没有显示 endDate。我已经设置了一个自定义输入来显示这两个值，但我不知道如何使用 datePicker 中的单个 onChange 属性来更新它们。我相信这导致组件失败并出现 RangeError: invalid time value。

const CustomDatePicker = (props) => {
  const {
    className,
    startDateId,
    endDateId,
    startLabel,
    endLabel,
    displayFormat,
    onStartDateChange,
    onEndDateChange,
    locale,
    startDate,
    endDate,
  } = props

const CustomInput = ({ value, onClick}) => {
    return 
     
        <input
          className="my-input"
          type="text"
          onClick={onClick}
          value={`${startDate} - ${endDate}`}
        />
      </div>
   
    )

return <DatePicker
            id={startDateId}
            selected={startDate}
            selectsRange
            startDate={startDate}
            endDate={endDate}
            placeholderText={placeholder}
            dateFormat={displayFormat}
            onChange={onStartDateChange}
            locale={selectLocale(locale)}
            customInput={<CustomInput />}
          />
}