标签: react-day-picker

我正在使用react-day-picker软件包选择包含年/月道具的日期。但是，年/月下拉菜单在iOS移动浏览器上无法正常运行：

import React from 'react';
import ReactDOM from "react-dom";
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

const currentYear = new Date().getFullYear();
const fromMonth = new Date(currentYear, 0);
const toMonth = new Date(currentYear + 10, 11);

function YearMonthForm({ date, localeUtils, onChange }) {
  const months = localeUtils.getMonths();

  const years = [];
  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
    years.push(i);
  }

  const handleChange = function handleChange(e) {
    const { year, month } = e.target.form;
    onChange(new Date(year.value, …

如何在其他表单组件的顶部显示反应日选择器输入字段的日历覆盖弹出窗口？日历被其他表单组件隐藏.我可以在某处设置某种z-index吗？

<DayPicker.Input
    name={this.id}
    placeholder="MM/DD/YYYY"
    format="M/D/YYYY"
    value={this.value}
    onDayChange={this.handleDayChange.bind(this)}
    dayPickerProps={datePickerProps}
/>

我使用DayPickerInput组件为表单上的字段添加日期，并且我想以其他语言（希伯来语）显示日期和月份。在该库的API中，我找到了一种非常简单的方法来更改基本组件（DayPicker）的语言，但是据我了解，这种方法不适用于DayPickerInput。

它设法更改所选日期的语言（在字段本身中），但不能更改选择器中的显示。

例如，

import React from "react";
import ReactDOM from "react-dom";

import DayPicker from "react-day-picker";

import MomentLocaleUtils from "react-day-picker/moment";

import "react-day-picker/lib/style.css";

import "moment/locale/he";

function LocalizedExample() {
  return (
    <div>
      <p>Hebrew</p>
      <DayPicker localeUtils={MomentLocaleUtils} locale="he" />
    </div>
  );
}

ReactDOM.render(<LocalizedExample />, document.getElementById("root"));

使用此代码，语言将根据需要进行更改，但是进行了以下更改（在第三行中）：

import DayPicker from "react-day-picker/DayPickerInput";

语言仍然是英语。

有没有办法做到这一点？

是否可以更改 DayPickerInput 输入字段的默认宽度？如果是，那么我怎样才能实现它？我不确定我们是否可以使用overlayComponent 做到这一点。

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

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

我试图使用react-day-Pickers组件,但我无法弄清楚如何导入.css文件,我不断收到错误:

Module parse failed: 

/Users/qliu/Documents/workspace/AppNexus/pricing_ui/contract-ui/app_contract-ui/node_modules/react-day-picker/lib/style.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (3:0)

我已经"css-loader": "^0.19.0",安装了package.json,这里是我的Calender.jsx文件:

import React from "react";
import DayPicker, { DateUtils } from "react-day-picker";

import "../../../node_modules/react-day-picker/lib/style.css"; // <==== ERROR ON THIS LINE

export default class Calender extends React.Component {

  state = {
    selectedDay: null
  };

  handleDayClick(e, day, modifiers) {
    if (modifiers.indexOf("disabled") > -1) {
      console.log("User clicked a disabled day.");
      return;
    }
    this.setState({
      selectedDay: day
    });
  } …

在我的 React 应用程序中，我尝试使用库react-day-picker https://react-day-picker.js.org/examples/selected-week将周值发送到服务器，但它以一天的间隔将值发布到服务器。

例如，当我在客户端中选择2021-03-07 到 2021-03-13之间的那一周时，我可以在日志中看到该周已正确发送，但在服务器中，我得到了具有 1 天偏移量的值，如下所示：

  selectedDays: [
    '2021-03-06T22:00:00.000Z',
    '2021-03-07T22:00:00.000Z',
    '2021-03-08T22:00:00.000Z',
    '2021-03-09T22:00:00.000Z',
    '2021-03-10T22:00:00.000Z',
    '2021-03-11T22:00:00.000Z',
    '2021-03-12T22:00:00.000Z'
  ]

这是我的客户端代码：

console.log(data);
// I get here the correct week values

axios({
  method: "post",
  url: "http://localhost:3001/",
  data: data,
}).then(
  (res) => {
    console.log(res);
  },
  (error) => {
    console.log(error);
  }
);

我的服务器代码：

exports.createNewGoals = async (request, response) => {
   
 // I get here the values with one day interval.
 console.log(request.body.selectedDays);

}

我猜这可能与本地化设置有关，但我没有定义任何自定义本地化设置。我在 Chrome 浏览器的 Windows 机器（he-il）上本地运行该项目。

日期在哪里更改以及如何正确配置它？ …

我正在使用DatePickerInputreact 组件并想在<input />里面设置元素的样式。使用组件的className属性，我只能<div />围绕容器设置样式。使用classNames对象属性还可以设置其他容器的样式。

那么是否有可能，如果有，如何将 CSS 类直接应用于<input />元素（我正在使用 Bootstrap，所以我想添加类“form-control”以保持一致性）？

我有一个使用react-day-picker的日期范围日历。除了不能从选择中禁用“所有”将来的日子以外，它的工作非常漂亮。api文档显示您可以输入一天或几天，但不能输入所有将来的日子？

      <DayPicker
        disabledDays={new Date()} // how to disable all days after today?
        modifiers={{
          sunday: day => day.getDay() === 0,
          firstOfMonth: day => day.getDate() === 1
        }}
        onDayClick={this.handleDayClick}
        onDayMouseEnter={this.handleDayMouseEnter}
      />

为什么我看到这个页面在错误的月份，它应该初始化显示August而不是September，我来自柬埔寨

http://react-day-picker.js.org/examples/months-initial

我正在使用npm程序包react-day-picker，并且该react-day-picker-input元素上的文档很少。它提到了一个名为的道具dayPickerProps，该道具带有名为的对象disabledDays。我不知道如何禁用周末和特定的日子相结合。我让它分别禁用周末和白天，但是当结合使用时，只使用第一个。该文档讨论了如何为常规的日期选择器实现此功能，但没有讨论采用不同道具的日期选择器输入组件。熟悉此软件包的人是否知道我如何完成此任务？

这是我的小提琴

请注意，卸下before钥匙如何使daysOfWeek钥匙起作用。任何帮助表示赞赏，谢谢。

当我单击日期选择器组件容器或日历中的单个单元格时，会添加一个蓝色边框。

我在 style.css 中找不到相关的 CSS，也没有看到 DevTools 中添加了任何可能添加蓝色边框的类。

我该如何摆脱这个？