:tada: Starting with version 0.8.0 it's css free. :warning: 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. |