Datepicker-vkminiapps

Календарь на React с поддержкой темной темы, выбора диапазона дат, мобильной адаптацией.

Особенность в том, что он автоматически меняет внешний вид под тему официального приложения ВКонтакте, если вы используете VKUI.

В ином случае тему нужно задать явно через пропс. Можно использовать и за пределами ВК без подключения каких-либо библиотек.

Installation

The package can be installed via npm:

npm install datepicker-vkminiapps --save

import React, { useState } from "react";
import { DatePicker } from "datepicker-vkminiapps";

/* Для обычного календаря */
const Example = () => {
  const [date, setDate] = useState(new Date()); // Date || dd.mm.yyyy || unixtime (ms) || unixtime (s) 
  return (
    <DatePicker 
      value={date} // можно передать null
      onChange={value => setDate(value)} 
    />
  );
};

/* Для диапазонного календаря */
const ExampleIsRange = () => {
  const range = {
    start: new Date(), // Date || dd.mm.yyyy || unixtime (ms) || unixtime (s) 
    end: new Date() // Date || dd.mm.yyyy || unixtime (ms) || unixtime (s)
  };   
  const [date, setDate] = useState(range); 
  return (
    <DatePicker 
      value={date} // можно передать null
      onChange={value => setDate(value)} 
      isRange={true}
    />
  );
};

Configuration

Обязательно:

<DatePicker value={date} onChange={value => setDate(value)} />

Props

Prop name	Description	Default value	Example values
isMobi	Адаптация под смартфон	false	true
isRange	Режим выбора диапазона	false	true
theme	Цветовая тема	"light"	"light", "dark"
hasInfinity	Бессрочно вместо отменить	false	true

hasInfinity работает при выборе диапазонного режима и предоставляет вместо кнопки "Отменить" кнопку "Бессрочно". По клику на неё в функцию onChange будет передан null.

License

The MIT License.