react-input-calendar-odin

    0.1.20 • Public • Published

    React Input Calendar

    React component for calendar widget.

    Installation

    React Input Calendar is available as an npm package.

    npm install react-input-calendar

    Use browserify and reactify for dependency management and JSX transformation.

    All styles written in CSS and are in file input-component.css.

    Demo

    http://rudeg.github.io/react-input-calendar

    Usage

    var Calendar = require('react-input-calendar');
    React.render(
      <Calendar
        format="DD/MM/YYYY"
        date="4-12-2014"
      />,
      document.body
    );

    Dependencies

    React

    Moment-range

    Font-Awesome

    API

    props.format

    Type: String

    Default: 'MM-DD-YYYY'

    Allowed Keys: All formats supported by moment.js

    Format of date, which display in input and set in date property.

    props.date

    Type: String or Date

    Default: Current date

    Set initial date value.

    props.minView

    Type: Int (from 0 to 2)

    Default: 0 (DaysView)

    Set minimal view. Values:

    0 - days

    1 - months

    2 - years.

    props.computableFormat

    Type: String

    Default: 'MM-DD-YYYY'

    Allowed Keys: All formats supported by moment.js

    Format of date for the onChange event. Default on the date format (ISO 8601) to ease the save of data.

    props.onChange

    Type: Function

    Default: null

    Set a function that will be triggered whenever there is a change in the selected date. It will return the date in the props.computableFormat format.

    props.onBlur

    Type: Function

    Default: null

    Set a function that will be triggered when the input field is blurred. It will return the event and the date in the props.computableFormat format.

    props.closeOnSelect

    Type: Boolean

    Default: undefined

    Define state when date picker would close once the user has clicked on a date.

    props.openOnInputFocus

    Type Boolean

    Default: undefined

    Setting this value to true makes the calendar widget open when the iput field is focused.

    props.hideIcon

    Type Boolean

    Default: false

    If true, the icon next to the input field will not be shown. Make sure you set openOnInputFocus to true if using this.

    props.placeholder

    Type: String

    Default: undefined

    Value to show in the input text box if no date is set.

    props.inputFieldId

    Type: String

    Default: null

    Define the ID of the input field where the date picker represents it's value. This can be useful when the date picker is used with a label element. The label element can be bound to the input field using the label for attribute.

    props.inputFieldClass

    Type: String

    Default: 'input-calendar-value'

    Define the class name of the input field where the date picker represents its value.

    License

    MIT

    Install

    npm i react-input-calendar-odin

    DownloadsWeekly Downloads

    0

    Version

    0.1.20

    License

    MIT

    Last publish

    Collaborators

    • pavamana