Как подключить bootstrap datapicker в React приложение?

145

23 июня 2019, 03:10

Накидал страничку приложения на 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 используется?

Answer 1

Да, имеется отличная библиотека с кучей разных 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