react-multi-date-picker

a simple React datepicker component for work with gregorian, persian, arabic and indian calendars

1.9.1
Source
npm

Version published: 4 years ago

Weekly downloads: 68K; decreased by-6.26%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

DatePicker

Plugins

Installation

npm install --save react-multi-date-picker

Usage

import React from "react";
import DatePicker from "react-multi-date-picker";

export default function Example() {
  return <DatePicker />;
}

Browser (none react-app)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Multi Date Picker</title>
  </head>
  <body>
    <span>Calendar Example :</span>
    <div id="calendar"></div>

    <span>DatePicker Example :</span>
    <div id="datePicker"></div>

    <span>DatePicker Example :</span>
    <div id="datePickerWithPlugin"></div>

    <!-- Ract -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

    <!-- DateObject -->
    <script src="https://cdn.jsdelivr.net/npm/date-object@latest/dist/date-object.min.js"></script>

    <!-- ReactMultiDatePicker -->
    <script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@latest/build/browser.min.js"></script>

    <!-- Optional Plugins -->
    <script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@latest/build/browser_plugins.min.js"></script>

    <script>
      const { DatePicker, Calendar } = ReactMultiDatePicker;

      const { Settings, DatePickerHeader } = ReactMultiDatePickerPlugins;

      ReactDOM.render(
        React.createElement(Calendar),
        document.getElementById("calendar")
      );

      ReactDOM.render(
        React.createElement(DatePicker),
        document.getElementById("datePicker")
      );

      ReactDOM.render(
        React.createElement(DatePicker, {
          plugins: [
            { position: "left", plugin: React.createElement(DatePickerHeader) },
            { position: "bottom", plugin: React.createElement(Settings) },
          ],
        }),
        document.getElementById("datePickerWithPlugin")
      );
    </script>
  </body>
</html>

Demo

https://shahabyazdi.github.io/react-multi-date-picker

Availble props

Name	Type	Default	Availability (DatePicker/ Calendar)
value	Date, DateObject, String, Number or Array	new Date()	both
multiple	Boolean	false (true if value is Array)	both
range	Boolean	false	both
timePicker	Boolean	false	both
onlyTimePicker	Boolean	false	both
onlyMonthPicker	Boolean	false	both
onlyYearPicker	Boolean	false	both
mustShowDates	Boolean	false (true in multiple & range mode)	both
format	String	YYYY/MM/DD	both
formattingIgnoreList	Array	undefined	both
local	String	en	both
calendar	String	gregorian	both
mapDays	Function	undefined	both
onChange	Function	undefined	both
className	String	""	both
weekDays	Array	undefined	both
months	Array	undefined	both
showOtherDays	Boolean	true	both
minDate	Date, DateObject, String or Number	undefined	both
maxDate	Date, DateObject, String or Number	undefined	both
disableYearPicker	Boolean	false	both
disableMonthPicker	Boolean	false	both
eachDaysInRange	Boolean	false	both
zIndex	Number	100	both
arrow	Boolean	true	DatePicker
animation	Boolean	false	DatePicker
inputClass	String	""	DatePicker
name	String	undefined	DatePicker
id	String	undefined	DatePicker
title	String	undefined	DatePicker
placeholder	String	undefined	DatePicker
style	Object	{}	DatePicker
type	String	input	DatePicker
render	React.Component or Function	undefined	DatePicker
disabled	Boolean	false	DatePicker
inputMode	String	undefined	DatePicker
scrollSensitive	Boolean	true	DatePicker
hideOnScroll	Boolean	false	DatePicker
calendarPosition	String	auto	DatePicker
containerStyle	Object	undefined	DatePicker
containerClassName	String	undefined	DatePicker
editable	Boolean	true	DatePicker
onlyShowInRangeDates	Boolean	true	DatePicker

Calendars and Locals

Calendars	Locals
gregorian (default)	en (default)
persian	fa
arabic	ar
indian	hi

Types

DatePicker Types
input (default)	input-icon	icon	button	custom

Keywords

FAQs

What is react-multi-date-picker?

Is react-multi-date-picker popular?

Is react-multi-date-picker well maintained?

Package last updated on 29 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install