Package Exports

semantic-ui-calendar-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (semantic-ui-calendar-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎉 Starting with version 0.8.0 it's css free. ⚠️ Uncompatible with semantic-ui-react version 0.83.0

semantic-ui-calendar-react

Datepicker react component based on semantic-ui-react components

My intention was to create something that looks like this https://github.com/mdehoog/Semantic-UI-Calendar.

Here you can find a live example https://arfedulov.github.io/semantic-ui-calendar-react

installation

npm

npm i semantic-ui-calendar-react

CDN

<script src="https://cdn.jsdelivr.net/npm/semantic-ui-calendar-react@latest/dist/umd/semantic-ui-calendar-react.js"></script>

Then you can access calendar components from your scripts like this:

const { DateInput } = SemanticUiCalendarReact;

usage

Let's create a form that needs date-related input fields.

Import input components:

import {
  DateInput,
  TimeInput,
  DateTimeInput,
  DatesRangeInput
} from 'semantic-ui-calendar-react';

Then build a form:

class DateTimeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: '',
      time: '',
      dateTime: '',
      datesRange: ''
    };
  }

  handleChange = (event, {name, value}) => {
    if (this.state.hasOwnProperty(name)) {
      this.setState({ [name]: value });
    }
  }

  render() {
    return (
      <Form>
        <DateInput
          name="date"
          placeholder="Date"
          value={this.state.date}
          iconPosition="left"
          onChange={this.handleChange}
        />
        <TimeInput
          name="time"
          placeholder="Time"
          value={this.state.time}
          iconPosition="left"
          onChange={this.handleChange}
        />
        <DateTimeInput
          name="dateTime"
          placeholder="Date Time"
          value={this.state.dateTime}
          iconPosition="left"
          onChange={this.handleChange}
        />
        <DatesRangeInput
          name="datesRange"
          placeholder="From - To"
          value={this.state.datesRange}
          iconPosition="left"
          onChange={this.handleChange}
        />
      </Form>
    );
  }
}

Also you can build a form with inline pickers as inputs. Just set inline prop on input element and it will be displayed as inline picker:

class DateTimeFormInline extends React.Component {
 handleChange = (event, {name, value}) => {
    if (this.state.hasOwnProperty(name)) {
      this.setState({ [name]: value });
    }
  }

  render() {
    return (
      <Form>
        <DateInput
          inline
          name='date'
          value={this.state.date}
          onChange={this.handleDateChange}
        />
      </Form>
    );
  }
}

or you can make it cleanable in the following way,

class ClearableDateTimeForm extends React.Component {
  handleChange = (event, {name, value}) => {
    if (this.state.hasOwnProperty(name)) {
      this.setState({ [name]: value });
    }
  }

  render() {
    return (
      <Form>
        <DateInput
          clearable
          clearIcon={<Icon name="remove" color="red" />}
          name="date"
          value={this.state.date}
          onChange={this.handleDateChange}
        />
      </Form>
    );
  }
}

Locales support

Since semantic-ui-calendar-react uses moment.js it supports locales. You can set locale globally:

import moment from 'moment';
import 'moment/locale/ru';

You can also set locale for *Input component locally using localization prop.

<DateInput localization='ru' />

Supported elements

DateInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`dateFormat`	{string} Date formatting string. You can use here anything that can be passed to `moment().format`. Default: `DD-MM-YYYY`
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`startMode`	{string} Display mode to start. One of ['year', 'month', 'day']. Default: `day`
`closable`	{bool} If true, popup closes after selecting a date
`initialDate`	{string\|moment\|Date} Date on which calendar opens. By default it opens on today's date. (Do not be confused by property name. For setting some default value just set into `value` prop).
`disable`	{string\|moment\|Date\|string[]\|moment[]\|Date[]} Date or list of dates that are displayed as disabled
`enable`	{string[]\|moment[]\|Date[]} Date or list of dates that are enabled (the rest are disabled)
`maxDate`	{string\|moment} Maximum date that can be selected
`minDate`	{string\|moment} Minimum date that can be selected
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`preserveViewMode`	{bool} Preserve last mode (`day`, `hour`, `minute`) each time user opens dialog. Default `true`
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`marked`	{moment\|Date\|moment[]\|Date[]} Date or list of dates that are displayed as marked
`markColor`	{string\|SemanticCOLORs} String specifying the mark color. Must be one of the Semantic UI colors
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.

TimeInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`closable`	{bool} If true, popup closes after selecting a time
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`timeFormat`	{string} One of ["24", "AMPM", "ampm"]. Default: `"24"`
`disableMinute`	{bool} If `true`, minutes picker won't be shown after picking the hour. Default: `false`
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.

DateTimeInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`dateTimeFormat`	{string} Datetime formatting string for the input's `value`. You can use any string here that can be passed to `moment().format`. If provided, it overrides `dateFormat`, `divider`, and `timeFormat`. Note: this does not affect the formats used to display the pop-up date and time pickers; it only affects the format of the input's `value` field. Default: `null`
`dateFormat`	{string} Date formatting string. You can use any string here that can be passed to `moment().format`. Default: `DD-MM-YYYY`. This formats only the date component of the datetime.
`timeFormat`	{string} One of ["24", "AMPM", "ampm"]. Default: `"24"`
`divider`	{string} Date and time divider. Default:
`disableMinute`	{bool} If `true`, minutes picker won't be shown after picking the hour. Default: `false`
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`startMode`	{string} Display mode to start. One of ['year', 'month', 'day']. Default: `day`
`closable`	{bool} If true, popup closes after selecting a date-time
`initialDate`	{string\|moment\|Date} Date on which calendar opens. By default it opens on today's date. (Do not be confused by property name. For setting some default value just set into `value` prop).
`disable`	{string\|moment\|string[]\|moment[]} Date or list of dates that are displayed as disabled
`maxDate`	{string\|moment} Maximum date that can be selected
`minDate`	{string\|moment} Minimum date that can be selected
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`preserveViewMode`	{bool} Preserve last mode (`day`, `hour`, `minute`) each time user opens dialog. Default `true`
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`marked`	{moment\|Date\|moment[]\|Date[]} Date or list of dates that are displayed as marked
`markColor`	{string\|SemanticCOLORs} String specifying the mark color. Must be one of the Semantic UI colors
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.

DatesRangeInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`dateFormat`	{string} Date formatting string. You can use here anything that can be passed to `moment().format`. Default: `DD.MM.YY`
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`closable`	{bool} If true, popup closes after selecting a dates range
`initialDate`	{string\|moment\|Date} Date on which calendar opens. By default it opens on today's date. (Do not be confused by property name. For setting some default value just set into `value` prop).
`maxDate`	{string\|moment} Maximum date that can be selected
`minDate`	{string\|moment} Minimum date that can be selected
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`marked`	{moment\|Date\|moment[]\|Date[]} Date or list of dates that are displayed as marked
`markColor`	{string\|SemanticCOLORs} String specifying the mark color. Must be one of the Semantic UI colors
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`allowSameEndDate`	{boolean} Allow end date to be the same as start date.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.

YearInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`closable`	{bool} If true, popup closes after selecting a year
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`initialDate`	{string\|moment\|Date} Date on which calendar opens. By default it opens on today's date. (Do not be confused by property name. For setting some default value just set into `value` prop).
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.

MonthInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`closable`	{bool} If true, popup closes after selecting a month
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`dateFormat`	{string} Moment date formatting string. Default: `"MMM"`
`disable`	{string\|Moment\|Date\|string[]\|Moment[]\|Date[]} Date or list of dates that are displayed as disabled.
`maxDate`	{string\|Moment\|Date\|string[]\|Moment[]\|Date[]} Maximum date that can be selected.
`minDate`	{string\|Moment\|Date\|string[]\|Moment[]\|Date[]} Minimum date that can be selected.
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.

MonthRangeInput

Prop	Description
all that can be used with SUIR Form.Input
`value`	{string} Currently selected value; must have format `dateFormat`.
`popupPosition`	{string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: `top left`
`inline`	{bool} If `true` inline picker displayed. Default: `false`
`closable`	{bool} If true, popup closes after selecting a month
`inlineLabel`	{bool} A field can have its label next to instead of above it.
`closeOnMouseLeave`	{bool} Should close when cursor leaves calendar popup. Default: `true`
`dateFormat`	{string} Moment date formatting string. Default: `"MMM"`
`maxDate`	{string\|Moment\|Date\|string[]\|Moment[]\|Date[]} Maximum date that can be selected.
`minDate`	{string\|Moment\|Date\|string[]\|Moment[]\|Date[]} Minimum date that can be selected.
`mountNode`	{any} The node where the picker should mount.
`onClear`	{func} Called after clear icon has clicked.
`clearable`	{boolean} Using the clearable setting will let users remove their selection from a calendar.
`clearIcon`	{any} Optional Icon to display inside the clearable Input.
`pickerWidth`	{string} Optional width value for picker (any string value that could be assigned to `style.width`).
`pickerStyle`	{object} Optional `style` object for picker.
`duration`	{number} Optional duration of the CSS transition animation in milliseconds. Default: `200`
`animation`	{string} Optional named animation event to used. Must be defined in CSS. Default: `'scale'`
`localization`	{string} Sets Moment date locale locally for this component.
`icon`	{string\|false} icon to display inside Input.
`iconPosition`	{'left'\|'right'} icon position inside Input. Default: 'right'.
`hideMobileKeyboard`	{bool} Try to prevent mobile keyboard appearing.