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.