Question

我是新人的反应。我需要使用react-datepicker

我希望在更改日期时获得输入值。如果我点击2017年10月20日，我想把2017年10月20日放在我的变量中。但是我应该使用组件的主要问题，而不是输入。

在我从州获取价值之前。喜欢this.state.value。但是现在它是状态中的对象（时刻）。而且这个对象没有价值领域。

有我的代码：

export default class DatePicker extends Component {
constructor (props) {
    super(props);
    // this.props.date should looks like "29 November 2017 00:00"
    // second argument for moment() it is format of date, because RFC 2822 date time format
    this.state = {
        date: moment(this.props.value, 'LLL')
    };
}
handleChange = (date) => {
  // const valueOfInput = this.state.date  <--- I want string with date here
  console.log('this.state.date',this.state.date);
  this.setState({date: date});
};
render() {
    return <Form.Field>
              <Label>
                <Picker
                  selected={this.state.date}
                  onChange={this.handleChange}
                  dateFormat="LLL"
                  locale={this.props.language}
                />
              </Label>
          </Form.Field>

Answer 1

请使用：

handleChange = date => {
  const valueOfInput = date.format();
  ///...
};

因为此datepicker会返回moment.js个对象！

有关详细信息，请查看moment.js docs here。

Answer 2

这通过以下操作为我解决了

handleDateChange = date => {
let selectedDateFromCalender = date.toUTCString();
this.setState({
      actualStartDate: selectedDateFromCalender,
  });}

<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}/>

您也可以使用以下方法，根据需要进行选择：

toISOString：“ 2020-10-05T09：10：38.000Z”

toJSON：“ 2020-10-06T09：09：16.000Z”

toUTCString：“ 2020年10月8日，星期四，格林尼治标准时间”

Answer 3

如果您想获取新值（一旦用户点击DatePicker的新日期），就将事件传递给方法。

class MyComponent extends React.Component {
  constructor(props) {
    this.state = {inputValue: moment(),} // this will set the initial date to "today", 
                                         // you could also put another prop.state value there
    this.handleChange = this.handleChange.bind(this);
  }
  }


  handleChange(value) {
    console.log(value); // this will be a moment date object
    // now you can put this value into state
    this.setState({inputValue: value});
  }

  render(){
    ...
    <DatePicker 
       onChange={(event) => this.handleChange(event)}
       selected={this.state.inputValue} otherProps={here} />
    ...
  }
};

Answer 4

尝试

<DatePicker 
   onChange={(value, e) => this.handleChange(value, e)}
   selected={this.state.inputValue} otherProps={here} />
// you can access the value field in handleChange by e.target.value


handleChange(value, e) {
console.log(value); // this will be a moment date object
console.log(e.target.value); // this will be a string value in datepicker input field

}

Answer 5

新版本的react-datepicker库停止使用moment.js对象，因此，如果要获取日期的格式化字符串表示形式，这是我的解决方案。

首次导入 import format from "date-fns/format"; 然后

    <DatePicker 
       onChange={(value)=>this.handleChange(format(value, "yyyy/MM/dd", { 
       awareOfUnicodeTokens: true }))}
       dateFormat="yyyy/MM/dd"
       selected={this.state.inputValue} otherProps={here} />
    ...

Answer 6

您可以在日期对象上使用getTime（）帮助函数来获取该特定日期的毫秒时间戳，这是JavaScript数字数据类型。用于将数据保存在应用程序的后端。例如Flask Peewee ORM需要为DateTimeField保存时间戳。

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $("#contactForm").submit(function(evt) {

        evt.preventDefault();

        let email = $("#contactForm div #email").val();
        let msg = $("#contactForm div #message").val();

        if(email.length < 10) {
            $("#contactForm div p.home-email-input").css("display", "block");
            return false;
        }
        if(msg.length < 10 || msg.length > 500) {
            $("#contactForm div p.home-message-input").css("display", "block");
            return false;
        }

        // Insert By Ajax

        let form_data = $(this).serialize();
        console.log(form_data);
        $.ajax({
            method: 'POST',
            url: "/",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: form_data,
            dataType: 'json',
            success: function(data) {
                if(data.error.length > 0) {
                    let errors = "";
                    for(let i = 0; i < data.error.length; i++) {
                        errors += "<div class='alert alert-danger'>"+data.error[i]+"</div>";
                    }
                    $("#form_output").html($errors);
                }else {

                    $("#form_output").html(data.success);
                    $("#contactForm")[0].reset();
                }
            },

        });

    });

来源：https://date-fns.org/v2.0.0-alpha.7/docs/getTime

将其组合以将默认状态值设置为页面加载时的时间戳：

const [startDate, setStartDate] = useState(new Date())

<DatePicker
  onSelect( date => {
    setStartDate(getTime(date))
  }
/>

否则，对于您的UI，您可以使用format（）帮助函数以任何给定的格式获取给定对象的字符串值：

useEffect(() => {
    setStartDate(getTime(startDate))
  }, [])

来源：https://date-fns.org/v2.0.0-alpha.7/docs/format

Answer 7

我有同样的问题，我使用以下解决方案解决了。请尝试：

<p>{this.state.date.toLocaleDateString()}</p>

React Datepicker（无法获得输入值）

7 个答案: