Date Picker

Allows picking a date or a date range. Uses moment.js under the hood. You may want to either bundle only the needed locales or even to ignore all of them.

Date picker (single date)

Example

<div id="date-picker"></div>

import {render} from 'react-dom';
import React, {Component} from 'react';

import DatePicker from '@jetbrains/ring-ui/components/date-picker/date-picker';

const container = document.getElementById('date-picker');

class DatePickerExample extends Component {
  state = {date: '01.01.18'}

  setDate = date => {
    this.setState({date})
  }

  render() {
    return (
      <div>
        <DatePicker
          date={this.state.date}
          onChange={this.setDate}
        />
      </div>
    );
  }
}

render(<DatePickerExample />, container);

Date picker (range)

Example

<div id="date-picker"></div>

import {render} from 'react-dom';
import React, {Component} from 'react';

import DatePicker from '@jetbrains/ring-ui/components/date-picker/date-picker';

const container = document.getElementById('date-picker');

class DatePickerExample extends Component {
  state = {
    from: '1 January 2018',
    to: '15 February 2018'
  };

  setRange = ({from, to}) => {
    this.setState({from, to});
  }

  render() {
    return (
      <div>
        <DatePicker
          from={this.state.from}
          to={this.state.to}
          onChange={this.setRange}
          range
        />
      </div>
    );
  }
}

render(<DatePickerExample />, container);

Date picker (clearable)

Example

<div id="date-picker"></div>

import {render} from 'react-dom';
import React, {Component} from 'react';

import DatePicker from '@jetbrains/ring-ui/components/date-picker/date-picker';

const container = document.getElementById('date-picker');

class DatePickerExample extends Component {
  state = {date: '01.01.18'}
  setDate = date => {
    this.setState({date})
  }

  render() {
    return (
      <div>
        <DatePicker
          date={this.state.date}
          onChange={this.setDate}
          clear
        />
      </div>
    );
  }
}

render(<DatePickerExample />, container);