: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

TimeInput

DateTimeInput

DatesRangeInput

YearInput

MonthInput

MonthRangeInput

Changelog

v0.15.0 2019-05-04

• feat: add hideMobileKeyboard prop #143

• feat: add className's to headers and wrap table cell content in span #139

• fix: Esc and Arrow keys fixes for Internet Explorer. And removed prevent default on arrow left/right events #137

• fix(DatesRangeInput): error when allowed range doesn't contain today #140

• fix (DateInput, DateTimeInput): update internal *Input date when value changed #142

v0.14.4 2019-03-30

• fix(package): set proper types path #115

v0.14.3 2019-03-17

• feat(DatesRangeInput): allow same start/end date selection when using #104

• fix: readOnly prop in InputView fe63e3d

• fix: #95 #55 can't change years and months in IE #110

• chore: build for multiple module systems ef32ca7

• chore: add umd build #111

v0.14.2 2019-02-27

• fix: can mark any date #98

• fix(InputView): don't wrap field in extra div #99

• fix: use "ui icon input" for correct styling #100

• fix: can remove icon from input #101

v0.14.1 2019-02-19

• feat: allow to mark specific dates #77

• feat: MonthRangeInput #79

• feat: adds localization prop on each component #85

• fix(MinutePicker): #78 minDate disables minutes in each hour in the day 93972b3

• fix: #83 pass popup mount node to inputView #89

• fix: #84 initialize picker state with input value #88

• fix(DateInput/DateTimeInput): #93 able to change year, month, date ... #96

v0.13.0 2019-01-12

• feat: added transitions for popup 65

• feat: pickerWidth and pickerStyle props on top level component 6ed8e76

• fix: BasePicker SyntheticEvent generic type 69

v0.12.2 2018-12-31

• feat: add clearable props to Input #60

• fix: do not select disabled cells after page switch b536d89

• fix: not jump over 0th cell on ArrowLeft press 394470c

• fix(MinutePicker): getInitialDatePosition handles disabled positions c1ad726

• fix: #59 prevent selecting disabled values bab7718

v0.12.1 2018-11-24

• fix: stale input node reference 32b56c3

• fix: jump over disabled cell when keyboard navigating 9c15bb1

• fix: if date in month/year disabled the whole month/year disabled ee9b673

• fix: string value in disable prop doesn't work 7ce6c73

v0.12.0 2018-11-19

• feat: add disableMinute prop to TimeInput (#49) #49

• feat: keyboard shortcuts support 0033d62

• fix: popup closes on selection e3d1807

• fix: extra Tab needed to navigate inside calendar 5acc549

• fix: remove on focus outline from poped up picker 550f1a4

v0.11.0 2018-11-03

• feat: add dateTimeFormat prop to DateTimePicker (#42) #42

• fix(yearPicker): initialize page with selected value 6c639aa

• fix: #28 popup blured when inside Modal 036a95f

• fix: initialDate prevent clearing input field 8c51722

v0.10.0 2018-10-18

• feat: allow passthrough of mountNode to InputView Popup (#38) #38

• fix: #39 invalid date when first week in Jan starts with day from prev month (#40) #40

v0.9.1 2018-09-30

• feat(preserveViewMode): allow preserveViewMode to reset mode onFocus #36

v0.9.0 2018-09-18

• fix: #31 min/maxDate params not working b9f335f
• fix: #34 calendar popup unexpectedly closes 5edea86
• fix: #33 initialDate doesn't work d15f374
• fix: delay handle change on one tick 4e012f4

• fix: weeks labels dont change locale 24b0632

• feat(DateInput): enable attribute #30 53c19c3

v0.8.0 2018-08-04

• feat: closeOnMouseLeave prop #23

• fix: #20 onClick prop got false instead of undefined #21

• breaking: use Form.Input instead of Input abda4fb

v0.7.1 2018-07-22

• feat: disable, minDate, maxDate attributes af0d3a9

• feat: add initialDate attribute 23e8008

• fix(DatesRangeInput): clear selected range if value is empty 3b57013

• fix(DateInput): accidental import couses error 45b9811