@dorgaren/react-vs-calendar v2.16.9

react-vs-calendar

A date and time picker component that is compatible with React and Preact. Uses moment.js. Strives to be downwards-compatible with ES5.

Forked from https://github.com/YouCanBookMe/react-datetime since the last accepted merge request is some 9 months ago with lots piling already.

Installation

Install using npm:

npm install --save @dorgaren/react-vs-calendar

Install using yarn:

yarn add @dorgaren/react-vs-calendar

Usage

React.js (or Preact with preact-compat or PreactX) and Moment.js are peer dependencies for react-vs-calendar (as well as Moment.js timezones if you want to use the displayTimeZone prop). These dependencies are not installed along with react-vs-calendar automatically, but your project needs to have them installed in order to make the calendar work. You can then use the control like in the example below.

const Calendar = require("@dorgaren/react-vs-calendar");

...

render: function()
{
    return <Calendar />;
}

TODO: add examples

Don't forget to add the CSS stylesheet to make it work out of the box.

API

i18n

Different language and date formats are supported by react-vs-calendar. React uses Moment.js to format the dates, and the easiest way of changing the language of the calendar is changing the Moment.js locale.

var moment = require("moment");
require("moment/locale/fr");
// Now react-vs-calendar will be in french

If there are multiple locales loaded, you can use the prop locale to define what language shall be used by the instance.

<Calendar locale="fr-ca" />
<Calendar locale="de" />

Customize the Input Appearance

It is possible to customize the way that the input is displayed. The simplest is to supply inputProps which get assigned to the default <input /> element within the component.

<Calendar inputProps={{ placeholder: "N/A", disabled: true }}>

Alternatively, if you need to render different content than an <input /> element, you may supply a renderInput function which is called instead.

var CustomCalendar = React.createClass({
    render: function()
    {
        return <Calendar renderInput={ this.renderInput } />;
    },
    renderInput: function(props, openCalendar, closeCalendar)
    {
        function clear()
        {
            props.onChange({ target: { value: "" } });
        };

        return (
            <div>
                <input { ...props } />
                <button onClick={ openCalendar }>open calendar</button>
                <button onClick={ closeCalendar }>close calendar</button>
                <button onClick={ clear }>clear</button>
            </div>
        );
    }
});

Customize the appearance

It is possible to customize the way that the datepicker display the days, months and years in the calendar. To adapt the calendar for every need it is possible to use the props renderDay(props, currentDate, selectedDate), renderMonth(props, month, year, selectedDate) and renderYear(props, year, selectedDate) to customize the output of each rendering method.

var CustomCalendar = React.createClass({
    render: function()
    {
        return <Calendar
            renderDay={ this.renderDay }
            renderMonth={ this.renderMonth }
            renderYear={ this.renderYear }
        />;
    },
    renderDay: function(props, currentDate, selectedDate)
    {
        return <td { ...props }>{ "0" + currentDate.date() }</td>;
    },
    renderMonth: function(props, month, year, selectedDate)
    {
        return <td { ...props }>{ month }</td>;
    },
    renderYear: function(props, year, selectedDate)
    {
        return <td { ...props }>{ year % 100 }</td>;
    }
});

Method Parameters

• props is the object that the control has calculated for this object. It is convenient to use this object as the props for your custom component, since it knows how to handle the click event and its className attribute is used by the default styles.
• selectedDate and currentDate are moment objects and can be used to change the output depending on the selected date, or the date for the current day.
• month and year are the numeric representation of the current month and year to be displayed. Notice that the possible month values range from 0 to 11.

Specify Available Units

You can filter out what you want the user to be able to pick by using dateFormat and timeFormat, e.g. to create a timepicker, yearpicker etc.

In this example the component is being used as a timepicker and can only be used for selecting a time.

<Calendar dateFormat={ false } />

In this example you can only select a year and month.

<Calendar dateFormat="YYYY-MM" timeFormat={ false } />

Selectable Dates

It is possible to disable dates in the calendar if the user are not allowed to select them, e.g. dates in the past. This is done using the prop isValidDate, which admits a function in the form function(currentDate, selectedDate) where both arguments are moment objects. The function shall return true for selectable dates, and false for disabled ones.

In the example below are all dates before today disabled.

// Let's use the static moment reference in the Datetime component
var yesterday = Datetime.moment().subtract(1, "day");
var valid = function(current)
{
    return current.isAfter(yesterday);
};
<Calendar isValidDate={ valid } />

It's also possible to disable the weekends, as shown in the example below.

var valid = function( current ){
    return current.day() !== 0 && current.day() !== 6;
};
<Calendar isValidDate={ valid } />

Usage with TypeScript

This project includes typings for TypeScript versions 1.8 and 2.0. Additional typings are not required.

Typings for 1.8 are found in react-vs-calendar.d.ts and typings for 2.0 are found in typings/index.d.ts.

import * as Calendar from "@dorgaren/react-vs-calendar";

class CustomCalendar extends React.Component<CalProps, CalState>
{
    render() JSX.Element { return <Calendar />; }
}

Contributions

For information about how to contribute, see the CONTRIBUTING file.

Development

npm run dev

This will start a local webpack-dev-server based on example/example.js where most development can be done.

If you want to develop using the component inside a React application, we recommend that you use react-vs-calendar-playground.

Changelog

MIT Licensed