Блог

Поэтому я пытаюсь использовать средства выбора даты и времени jquery в своем приложении React, которое было предварительно загружено чем-то под названием smart admin. В настоящее время единственный способ заставить их работать-это захватить входное значение с помощью document.getElementById . В этом есть две ошибки — 1. По-видимому, вы действительно не должны использовать document.getElementById или что-то подобное в React. 2. Я чувствую, что на самом деле не могу больше манипулировать свиданиями, и мне это нужно. Итак, ниже приведен код, с которым я ХОЧУ работать, но не

сам индикатор даты:

 import React from "react";
import $ from "jquery";
import "smartadmin-plugins/es6/jquery-ui.min";

export default class UiDatepicker extends React.Component {
  componentDidMount() {
    const onSelectCallbacks = [];
    const props = this.props;
    const element = $(this.refs.input);

    console.log('PROPS:', props);

    if (props.minRestrict) {
      onSelectCallbacks.push(selectedDate => {
        $(props.minRestrict).datepicker("option", "minDate", selectedDate);
      });
    }
    if (props.maxRestrict) {
      onSelectCallbacks.push(selectedDate => {
        $(props.maxRestrict).datepicker("option", "maxDate", selectedDate);
      });
    }

    //Let others know about changes to the data field
    onSelectCallbacks.push(selectedDate => {
      element.triggerHandler("change");

      const form = element.closest("form");

      if (typeof form.bootstrapValidator === "function") {
        try {
          form.bootstrapValidator("revalidateField", element);
        } catch (e) {
          console.log(e.message);
        }
      }
    });

    const options = {
      prevText: '<i class="fa fa-chevron-left"></i>',
      nextText: '<i class="fa fa-chevron-right"></i>',
      onSelect: selectedDate => {
        onSelectCallbacks.forEach(cb => {
          cb.call(cb, selectedDate);
          
          console.log(selectedDate); <----- this consoles out the date, which is what I need!!!
        });
      }
    };

    if (props.numberOfMonths) options.numberOfMonths = props.numberOfMonths;

    if (props.dateFormat) options.dateFormat = props.dateFormat;

    if (props.defaultDate) options.defaultDate = props.defaultDate;

    if (props.changeMonth) options.changeMonth = props.changeMonth;

    element.datepicker(options);
  }

  render() {
    const {
      minRestrict,
      maxRestrict,
      changesMonth,
      numberOfMonths,
      dateFormat,
      defaultDate,
      changeMonth,
      ...props
    } = { ...this.props };
    return <input type="text" {...props} ref="input" />;
  }
}
 

Я читал, что эта onSelect функция максимально близка к onChange, но я не знаю, как использовать эту функцию в моем Search.js файл. Если я смогу это понять, это было бы здорово, потому что в моем журнале консоли выводится дата, а это именно то, что мне нужно.

Код в моем Search.js файл является:

 export default class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ... other state
      startDate: "",
      ... other state
 }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    }
    , () => {console.log('START DATE:', this.state.startDate)});
  }
 

Мой другой файл с кодом JSX:

                           <label className="input">
                            {" "}
                            <i className="icon-append fa fa-calendar" />
                            <UiDatepicker
                              type="text"
                              id="search-rec-min-sd"
                              minRestrict="#search-rec-max-sd"
                              placeholder="Select Date"
                              dateFormat="mm/dd/yy"
                              name="startDate"
                              value={props.data.startDate}
                              onChange={props.handleChange}
                            />
                          </label>
 

This does not work. It works for every other form input except when I use the date or time picker. Is there a way around this? I really don’t want to keep using document.getElementById (which I don’t have shown in here, but I figured it wasn’t needed). Is there a way to pass that selectedDate variable to my Search.js component and set it inside the stat object? I’m not React savvy enough yet! Any help would be appreciated