Установка значения Date Picker для одного onChange - PullRequest
Новая
       8

Установка значения Date Picker для одного onChange

0 голосов
/ 28 мая 2019

Я пытаюсь установить дату для двух разных типов ввода.Я попытался вызвать разные функции для обоих обработчиков событий ввода, и это сработало.Но я хочу использовать более сжатый способ управления датой ввода.Другой подход, который я пробовал вызывать single onChange (), похоже, не меняет моего поля ввода.

Вот мой код: 

import React, { Component } from "react";
import axios from "axios";

export default class DatePage extends Component {
  constructor() {
    super();
    this.state = {
      startDate: '',
      endDate: '',
      clicked: false
    };
  }

  componentDidMount() {

    this.setDate();



    this.setState({
        clicked: true
      });
  }

  setDate = (e) => {

    if (this.state.clicked !== true) 
    {
      var date = new Date();

      var newdate =
        date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();

      this.setState({
        startDate: newdate,
        endDate: newdate,
        clicked: false
      });
    } 

    else 
    {

        this.setState({
            [e.target.name]: e.target.value
        });
    }
  };

  render() {
    return (
      <div>

        <label>From</label>
        <input
          type="date"
          name="startdate"
          value={this.state.startDate}
          onChange={this.setDate}

        />

        <label>To</label>
        <input
          type="date"
          name="enddate"
          value={this.state.endDate}
          onChange={this.setDate}
        />
      </div>
    );
  }
}

По умолчанию я устанавливаю текущийдата и изменение выбранной даты

Ответы [ 2 ]

3 голосов
/ 28 мая 2019

Вам необходимо исправить имена в форме.

из: name="startdate" в name="startDate"

Также здесь: name="enddate" в name="endDate"

1 голос
/ 28 мая 2019

Кажется, дело не в этом. Я убрал код.

дата начала до даты начала конец до конца. Кажется, это хорошо работает, если вы измените эту часть. 

import React, { Component } from "react";


export default class Datepage extends Component {
  constructor() {
    super();
    var date = new Date();
    var newdate =
      date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();

    this.state = {
      startdate: newdate,
      enddate: newdate,
      clicked: false
    };
  }

  componentDidMount() {
  }

  setDate = (e) => {    
      this.setState({
          [e.target.name]: e.target.value
      });    
  };

  render() {
    return (
      <div>

        <label>From</label>
        <input
          type="date"
          name="startdate"
          value={this.state.startdate}
          onChange={this.setDate.bind(this)}

        />

        <label>To</label>
        <input
          type="date"
          name="enddate"
          value={this.state.enddate}
          onChange={this.setDate.bind(this)}
        />
      </div>
    );
  }
}
...