Datepicker View Source



The DatePicker component is used to allow the user to select a date. It returns a string in the yyyy-mm-dd form.



Imports



Import React and the DatePicker Component.


0
import * as React from "react";
1
import { DatePicker } from "slate-react-system";


Datepicker with disabled dates



Pick a date with weekends disabled


Define a function to specify disabled dates. This function accepts a Date object and returns true for dates that are disabled (cannot be selected), false otherwise.

0
import moment from "moment";
1
2
const weekdaysOnly = (date) => {
3
  if (moment(date).day() === 0 || moment(date).day() === 6) return true;
4
  return false;
5
};

Define the DatePicker component with the isDisabled function.

0
class ExampleOne extends React.Component {
1
  state = { exampleOne: "" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <DatePicker
8
        label="Pick a date with weekends disabled"
9
        name="exampleOne"
10
        value={this.state.exampleOne}
11
        isDisabled={weekdaysOnly}
12
        onChange={this._handleChange}
13
      />
14
    );
15
  }
16
}



Datepicker with minimum value



Pick a date with a minimum value


Declare the DatePicker component with a minimum value in the form of a Date or an ISO 8601 String.

0
class ExampleTwo extends React.Component {
1
  state = { exampleTwo: "" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <DatePicker
8
        label="Pick a date with a minimum value"
9
        tooltip="Date must be today or after"
10
        name="exampleTwo"
11
        value={this.state.exampleTwo}
12
        min={new Date()}
13
        onChange={this._handleChange}
14
      />
15
    );
16
  }
17
}



Datepicker with default value



Pick a date with a default value


Declare the DatePicker component with a default value in the form of a Date or an ISO 8601 String.

0
class ExampleThree extends React.Component {
1
  state = { exampleThree: "2020-07-13" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <DatePicker
8
        label="Pick a date with a default value"
9
        name="exampleThree"
10
        value={this.state.exampleThree}
11
        onChange={this._handleChange}
12
      />
13
    );
14
  }
15
}



Accepted React Properties



DatePicker
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
value
stringDate
null
The value of the datepicker. Can be used to assign default values as well
name
string
null
Input name
label
string
null
Label text
description
string
null
Description text
tooltip
string
null
Tooltip text
min
stringDate
null
Earliest date allowed. String must be in yyyy-mm-dd form
max
stringDate
null
Latest date allowed. String must be in yyyy-mm-dd form
isDisabled
function
null
Function that accepts a Date object and returns true if the date should be disabled (cannot be selected), false otherwise
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source