Как создать React Datepicker

Представлять себе.

Форма, в которой клиенты могут выбрать дату и время встречи.

Никакой переписки по электронной почте, только заранее установленное время встречи, которое клиент выберет для себя.

Войдите в датпикер React Flatpikr.

Что такое Flatpickr?

Flatpickr - это легкая, управляемая UX библиотека JavaScript, совместимая с Angular, Vue, Ember и React.

Это небольшая часть других библиотек даты и времени, она поддерживается в браузерах IE9, Edge, Chrome, Safari и Firefox.

Возможности включают:

ввод даты / времени
8 красочных тем
удобный для человека формат
отключить диапазоны дат и время

Как создать DatePicker на React

Создайте свое приложение React
Установить react-flatpickr
Импортируйте Flatpickr в свое приложение
Импортировать тему Flatpickr
Добавить constructor() метод
Добавить render() метод
Передайте переменную состояния в компонент Flatpickr
Добавить OnChange() обработчик события
React FlatPickr форматирование

Создайте свое приложение React

Командная строка Windows

C:\Users\Owner\desktop\react> npx create-react-app react-example

C:\Users\Owner\desktop\react> cd react-example

C:\Users\Owner\desktop\react\react-example> npm start

Сначала создайте свое приложение React, если вы еще этого не сделали.

Откройте приложение React в браузере

Запустите свой сервер разработки, чтобы увидеть, как ваше приложение React работает на сервере разработки.

Настроить файлы React

response-example ›src› index.js (обновлено)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'))

response-example ›src› App.js (обновлено)

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        
        <h1>Hello World</h1>
        
      </div>
    );
  }
       
}

export default App;

Настройте приложение React, если вы еще этого не сделали.

Удалите все содержимое файла src, кроме файлов index.js и App.js. Затем добавьте базовый компонент класса.

Установите React Datepicker

Установить Flatpickr

Командная строка Windows

(command + C)
Terminate batch job (Y/N)? y

C:\Users\Owner\desktop\react\react-example> npm install react-flatpickr

C:\Users\Owner\desktop\react\react-example> npm start

Завершите пакетное задание, затем установите пакет react-flatpickr, связанный React flatpickr из официального репозитория flatpickr Github.

После завершения установки снова запустите сервер.

Настройте React Datepicker

Импортировать Flatpickr

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from "react-flatpickr";


class App extends Component {
  render() {
    return (
      <div className="App">
        
        <h1>Hello World</h1>
        
      </div>
    );
  }
       
}

export default App;

Начните с импорта Flatpickr from "react-flatpickr" вверху страницы.

Загрузите выбранный вами Flatpickr CSS

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        
        <h1>Hello World</h1>
        
      </div>
    );
  }
       
}

export default App;

Кроме того, импортируйте файл CSS по вашему выбору. Возможные варианты:

material_green.css
material_blue.css
material_red.css
material_orange.css
dark.css
airbnb.css
confetti.css

Добавьте метод constructor ()

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    return (
      <div className="App">
        
        <h1>Some Text</h1>
        
      </div>
    );
  }
       
}

export default App;

Теперь добавьте метод constructor() перед методом render().

Что такое constructor() метод?

Метод constructor() инициализирует объект, созданный в компоненте класса.

Вызов super() в constructor() методе компонента.

Что такое super() метод?

super() дает нам доступ к родительскому компоненту, и теперь мы можем использовать this.

Что такое this.state?

this.state - это отображаемое значение (то есть то, что в настоящее время отображается на экране).

Затем мы создадим переменную состояния date, равную new Date().

Что такое new Date()?

new Date() при вызове в качестве конструктора JavaScript возвращает новое строковое представление текущей даты и времени.

Добавить постоянную переменную

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <div className="App">
        
        <h1>Some Text</h1>
        
      </div>
    );
  }
       
}

export default App;

Теперь перейдите к методу render() и установите const { date } на this.state, сначала инициализированный в constructor().

Что такое const переменная?

Переменная const - это постоянная ссылка на значение. Это примитивное значение, которое нельзя изменить из-за того, что оно присвоено константе.

Передать переменную состояния в Flatpickr

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Теперь мы можем передать переменную состояния date как value дочернему компоненту Flatpickr.

Мы также добавим OnChange обработчик событий, который будет передавать параметр date с помощью стрелочной функции.

Что такое ловушка OnChange?

Обработчик событий OnChange срабатывает, когда пользователь выбирает дату или изменяет время.

Что такое setState?

setState() метод изменяет состояние компонента и сообщает React о необходимости повторного рендеринга компонента и дочерних элементов с обновленным состоянием.

Просмотрите средство выбора даты и времени React в браузере

Пришло время увидеть нашу работу в браузере.

Перезагрузите страницу и бум!

Вы увидите поле с текущими датой и временем.

Теперь нажмите на ввод.

Должен появиться календарь с опцией даты и времени.

Вы можете изменить дату и время.

Дополнительные параметры React Datepicker

Теперь о параметрах настройки.

React Flatpickr: minDate

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              minDate: 'today',
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Установите минимальную дату «сегодня», чтобы никто не мог выбрать дату встречи, которая уже состоялась.

React Flatpickr: minTime

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              minTime: "08:00",
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Установите минимальное время, чтобы никто не мог выбрать время до рабочего времени. Это необходимо для набора в военное время.

React Flatpickr: maxTime

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              maxTime: "17:00",
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Установите максимальное время, чтобы никто не мог выбрать время в нерабочее время.

React Flatpickr: altFormat

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              altFormat: "m/d/Y h:i K",
              altInput:true,
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Теперь установите альтернативный формат, более удобный для чтения клиентами. Дополнительные сведения о форматах даты и времени см. В документации по форматированию.

React Flatpickr: отключите определенный день недели

response-example ›src› App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              disable: [
              function(date) {
                  // return true to disable
                  return (date.getDay() === 0 || date.getDay() === 6);}],
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Наконец, отключите определенные дни недели с помощью функции, указанной выше, добавленной к параметрам.

Эта функция отключает выбор воскресенья и субботы.

Это были лишь некоторые из основных примеров. Посетите flatpickr.js.org, чтобы узнать больше о параметрах настройки.

Первоначально опубликовано на https://www.ordinarycoders.com.

Как создать React Datepicker

Что такое Flatpickr?

Как создать DatePicker на React

Создайте свое приложение React

Настроить файлы React

Установите React Datepicker

Настройте React Datepicker

Просмотрите средство выбора даты и времени React в браузере

Дополнительные параметры React Datepicker

Вопросы по теме