1

Накидал страничку приложения на Bootstrap, подключаю DatePicker сначала ругается, что не знает, что такое $. Установил jQuery, импортировал. Потом ругается, что не знает, что такое DataTimePicker, подключил еще какую-то либу, слетела верстка, пытался подключить стили, почему-то не срабатывает ничего.

import React, { Component } from 'react';
import $ from 'jquery';
import datepickerFactory from 'jquery-datepicker';

datepickerFactory($);

class History extends Component {
   constructor(props) {}
   
   componentDidMount() {
     console.log($);
 
 $("#datetimepicker7").datetimepicker();
 $("#datetimepicker8").datetimepicker({
 $( function() {
 $( "#datepicker" ).datepicker();
} );
 $("#datetimepicker7").datepicker();
 $("#datetimepicker8").datepicker({
     useCurrent: false
 });
 $("#datetimepicker7").on("dp.change", function (e) {
 
<section>
 <div className="container" style={{marginBottom: 20}}>
  <div className="row">
   <div className="col-xs-3">
    <div className="form-group">
     <div className="input-group date" id="datetimepicker7">
      <input type="text" className="form-control"/>
      <span className="input-group-addon">
        <i className="glyphicon glyphicon-calendar"></i>
      </span>
     </div>
    </div>  
   </div>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Получается что DatePicker есть, но верстка слетает. Пробовал стили подлкючить из node_modules/bootstrap_datapicker/build/css, почему-то не срабатывает.

Может кто-нибудь посоветовать как быть в данной ситуации, или может другую библиотеку подсказать, которая в React используется?

1
  • Плохая практика использовать JQuery, тк React использует virtual DOM и в какой-нибудь момент появиться ошибка (Цитирую: React не знает про изменения DOM, которые сделаны вне React (C) ) 7 июл 2020 в 1:05

2 ответа 2

3

Да, имеется отличная библиотека с кучей разных Datepicker-ов - это ReactJS Datepicker, мощный компонент с кучей настроек и видов отображения. Для установки библиотеки нужно выполнить:

npm install react-datepicker --save

Затем в вашем коде просто импортировать сам Datepicker и использовать, пример кода:

import React from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

Ссылка на проект ReactJS Datepicker в GitHub: React Date Picker

Скриншот того, как выглядит этот Datepicker:

введите сюда описание изображения

Неоднократно сталкивался с проблемой стилей Bootstrap, но данный Datepicker не ломает разметку, также позволяет настроить его вид. Еще одна полезная ссылка на описание данного компонента: General datepicker component description

0
0

Дополню вышеописанный ответ о том, как русифицировать:


  1. Устанавливаете в проект date-fns

  2. Подключаете к нужному компоненту модулю import ru from 'date-fns/locale/ru';

  3. Вызываете установленный ранее DatePicker с пропсом locate. <DatePicker locale={ru} />


Можно добавить пропс inline <DatePicker inline locale={ru} />

введите сюда описание изображения

P.S. Скрин это личная кастомизация, не из коробки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.