A date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This can be accomplished by using contrast which also enables you to use whatever style you wish. Contrast, also known as CDBReact, is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites and web apps.

Prerequisites

The date picker and time picker would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact, but the following are necessary:

• JavaScript knowledge
• Basic React Knowledge
• Basic Bootstrap knowledge
• NPM installed

The data picker we are going to build will look like this

Setup

To Check that you have node installed. To do this, run the following command in your terminal.

Code

Node-v

This should show you the current version of the node you have installed on your machine. If you don’t have nodejs installed, download it here. Installing node also installs npm on your PC, but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

Code:

npx create-react-app datepicker-app

I named the project datepicker-app but you can use any name of your choice.

Install CDBReact-Pro

Now, we have to install CDBReact in our project. To use the date picker, you need to download the pro version here. After the download, you can now run the following command to install CBDReact.

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

React Bootstrap Datepicker

Let us create a file named datepicker.js which would contain our date picker component. Import the various date picker components that we’ll be using.

Code:

import React, { useState } from 'react';
import { CDBDatePicker, CDBContainer } from 'cdbreact-pro';

In the code above, we imported the date picker component from contrast. Let us go ahead and write the code for the body of the date picker.

Code

const DatePicker = () => {
  const [value, onChange] = useState(new Date());

  return (
    <CDBContainer>
      <CDBDatePicker onChange={onChange} value={value} />
    </CDBContainer>
  );
};
export default DatePicker;

The code above shows the date picker body code and functions with styling. We can now render the code in our app.js.

Code:

import './App.css';
import DatePicker from './datepicker.js';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Datepicker />
      </div>
    </Router>
  );
}
export default App;

In the above code, it renders the date picker on the app.js which shows on the web. Your work should look like this.

TIME PICKER

Code:

npx create-react-app timepicker-app

I named the project timepicker-app but you can use any name of your choice.

Install CDBReact: Now, we have to install CDBReact in our project. To use the time picker you need to download the pro version here. After the download, you can now run the following command to install CBDReact

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

React Bootstrap Timepicker

Bootstrap material time picker is a component that uses a dialog to select a single time in hours: minutes format. The selected time is indicated by the filled circle at the end of the clock hand. Let us go ahead to create a file named timepicker.js which would contain our time picker component. Import the various time picker components that we’ll be using.

Code

import React from "react";
import { CDBTimePicker, CDBContainer } from "cdbreact-pro";

In the code above, we imported the time picker components

Code:

const TimePicker = () => {
  return (
    <CDBContainer>
        <CDBTimePicker placeholder="10:05 AM" theme="classic" colorPalette="dark" />
    </CDBContainer>
  );
};
export default TimePicker;

The above code renders the date picker on the app.js, which shows on the web. Your work should look like this.

Code:

import './App.css';
import TimePicker from './timepicker.js';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <TimePicker  />
      </div>
    </Router>
  );
}

export default App;

Conclusion

TimePicker and Datepicker are simple to include in your project using contrast and allow for better styling features. You can also check out some other features you can use in CDBReact Datepicker Docs and CDBReact TimePicker Docs.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.