How to create a beautiful datepicker using Contrast in React.
Tags: tailwindcss, react, programming, webdev
Published: 2021-08-02 09:21:41

---
title: How to create a beautiful datepicker using Contrast in React.
published: true
date: 2021-04-20 01:16:04 UTC
tags: [tailwindcss, react, programming, webdev]
canonical_url: https://www.devwares.com/blog//create-datepicker-with-contrast
cover_image: https://devwares.com/blog/images/reactArticle5.png 
---

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 datepicker and timepicker 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 datapicker we are going to build will look like this
![DatePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur16yoe0kiz90l1bhsx0.png)


**Setup**

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

**Code**
```javascript
node-v
```

This should show you the current version of 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:**
```javascript
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. In order to use the datepicker you need to download the pro version here. After the download you can now run the following command to install CBDReact.

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

Or using Yarn

```javascript
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.

## Datepicker

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

**Code:**

```jsx
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 datepicker.

**Code**

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

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

The code above shows the datepicker body code and functions with styling. We can now go ahead to render the code in our app.js

**Code:**

```jsx
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 datepicker on the app.js which shows on the web. Your work should look like this. 

![DatePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur16yoe0kiz90l1bhsx0.png)

## TIME PICKER

![TimePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td12fixv4jw5g4bj0xv0.png)

**Code:**

```javascript
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. In order to use the timepicker you need to download the pro version here. After the download you can now run the following command to install CBDReact

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

Or using Yarn
```javascript
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.

## Timepicker

Bootstrap material time picker is a component which 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 timepicker component. Import the various timepicker components that we’ll be using.


**Code**

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

In the code above, we imported the timepicker components 

**Code:**

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



The code above shows the function of telling and setting time.
We can go ahead the render this timepicker on our app.js

**Code:**

```jsx
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;
```

![TimePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td12fixv4jw5g4bj0xv0.png)

**Conclusion**

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


###Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

![Contrast Design Boostrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro) 

## Resources

- [Link to the Github Code](https://github.com/Iheanacho-ai/Tailwind-react-modal)

- [Link to the Tailwind CSS Modals Docs](https://tailwindui.com/components/application-ui/overlays/modals)

- [Get Tailwind CSS PRO](https://tailwindui.com/pricing)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Link to the modal documentation](https://www.devwares.com/docs/contrast/javascript/components/modal)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)