Reactstrap Core Date Pickers

Pro Component

Component made with the use of React-Datetime.

Description

We’ve made the following date picker components using various reactstrap components, react-datetime, and Bootstrap classes and also some custom scss/css classes.

Example

If you wish to make your own component out of the react-datetime plugin, please check its own docs here, or on our plugins section here.

Unfortunately, we are experiencing some difficulties with our live preview docs, and for some reason, the code demo does not work for this plugin and components. Please check them out here.

Date Time

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import DateTime from "components/date-pickers/DateTime.js";

function Example() {
  return (
    <>
      <DateTime />
    </>
  );
}

export default Example;

Only Time

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import OnlyTime from "components/date-pickers/OnlyTime.js";

function Example() {
  return (
    <>
      <OnlyTime />
    </>
  );
}

export default Example;

Only Date

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import OnlyDate from "components/date-pickers/OnlyDate.js";

function Example() {
  return (
    <>
      <OnlyDate />
    </>
  );
}

export default Example;

Range

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Range from "components/date-pickers/Range.js";

function Example() {
  return (
    <>
      <Range />
    </>
  );
}

export default Example;

Note

You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.