Hoffensoft Hoffensoft
contact@hoffensoft.com
Menu
  • Home
  • Practices
    • Cloud
      • Salesforce Solutions
      • ServiceNow
      • JIRA
      +
    • Analytics
    • Voice
    • Mobile
    • Open Source
    • Dev Ops
      • AWS
      • Google Cloud Platform
      • IBM Cloud
      • Azure Cloud
      +
    • Research and Development
    +
  • Success
  • About Us
  • Helping Hands
  • Blogs
  • Careers
  • Contact Us

React Date Component

HomeOpen SourceReact Date Component
Date component
24 Dec

One of the most popular front end libraries used now days is React. React is an open-source front end library for building user interface which is mainly used by single-page applications. React was first created by Jordan Walke, a software engineer working for Facebook and it’s deployed on Facebook’s news feed in 2011 and on Instagram.com in 2012.

Features of React JS

  1. JSX
  2. Virtual Dom
  3. Single directional data flow
  4. Reusable Component
  5. Hooks

Reusable Component

The reusable component is the heart of the React Application. Building a reusable component will reduce the code size and you can make use of the single logic available wherever you need. There are many npm modules available which are used to write reusable component. Here we will explain how to write a reusable component using reactstrap, redux from, redux

Creating a Reusable Component

In this section, we will create a reusable component for input and button. The first step to create react reusable component is to start with a simple component which will be easy to understand for you

  1. Date Range Component

Date Range Component

The Date Range component that allows user to select start and end date & time. In this date range component, we can set predefined ranges like ‘This Month’, ‘Last 30 Days’, ‘This Week’ and etc. And also you can use a single date & time selection picker with mentioning in component properties.

● Prerequisites

Believe you have already completed the react installation process. If not, please follow the steps mentioned here.

● Create Folder

Create form  folder inside component folder (src > Component > Form > datepicker.js ) and create a datepicker.js file inside form folder

● Importing the Required Files

We have used Hooks feature to write the components. To write the react component first we need to import react.

import React from ‘react’;

● Reusable Function

Write functional to get props and use the props to generate a reusable component

import React, {Component, useState} from ‘react’;

import moment from ‘moment’

import DateRangePicker from ‘react-bootstrap-daterangepicker’;

import { FormControl } from ‘react-bootstrap’

export function Daterange(props){

   const [ state, setstate ] = useState(‘All’);

   const [ startdate, setstartdate ] = useState(”);

   const [ enddate, setenddate ] = useState(”);

   const ranges = {

      ‘All’: [undefined, undefined],

      ‘Today’: [moment(), moment()],

      ‘Yesterday’: [moment().subtract(1, ‘days’), moment().subtract(1, ‘days’)],

      ‘Last 7 Days’: [moment().subtract(6, ‘days’), moment()],

      ‘Last 30 Days’:[moment().subtract(29, ‘days’), moment()],

      ‘This Month’: [moment().startOf(‘month’), moment().endOf(‘month’)],

      ‘Last Month’: [moment().subtract(1, ‘month’).startOf(‘month’), moment().subtract(1, ‘month’).endOf(‘month’)]

   }

   return(

       <div className=”form-group”>

           <div className=”form-label”>{props.label}</div>

           <DateRangePicker  ranges={[]} showWeekNumbers showCustomRangeLabel showDropdowns onApply={props.apply.bind(this)} timePicker={props.timePicker}>

               <div id=”reportrange” className=”form-control date-range-picker d-flex position-relative”>

                   <span style={{ fontWeight: ‘unset’ }}>{props.value}</span>

                   <i className=”far fa-calendar-alt pr-5px pull-right-position” style={{ float: ‘right’, marginRight:’5px’ }}></i> 

               </div>

           </DateRangePicker>

       </div>

   )

}

Note : Copy this code and past this in (src > component > form > datepicker.js )  datepicker.js file

● How to use this Date Range Component

We have created a reusable date range component now we need to use this component in some pages to see how it works. To use this select component we need to create a file container folder (src > container > Pags > datepicker.js ) and name it as datepicker.js. Follow the steps to use this component

● Import the Component and Required Modules

  • Import react
    – importReact,{Component} from “react”;
  • Import filed and redux form
    – import { Field, reduxForm, } from ‘redux-form’;
  • Import the component that we created
    – import  { select }  from ‘../../../Component/Form/datepicker;

 ● Utilizing Date Range Component

You can import the component where necessary and use the date range component as mentioned below. You can use this code with bootstrap to get a rich user interface

<div className=”form-group”>

   <div className=”form-label”>Date Range Picker</div>

   <DateRangePicker  ranges={ranges = {‘All’: [undefined, undefined],’Today’: [moment(), moment()],’Yesterday’: [moment().subtract(1, ‘days’), moment().subtract(1, ‘days’)],’Last 7 Days’: [moment().subtract(6, ‘days’), moment()],’Last 30 Days’: [moment().subtract(29, ‘days’), moment()],’This Month’: [moment().startOf(‘month’), moment().endOf(‘month’)],’Last Month’: [moment().subtract(1, ‘month’).startOf(‘month’), moment().subtract(1, ‘month’).endOf(‘month’)]}} showWeekNumbers showCustomRangeLabel showDropdowns onApply={props.apply.bind(this)} timePicker=”true” >

                           <div id=”reportrange” className=”form-control date-range-picker d-flex position-relative”>

                               <span style={{ fontWeight: ‘unset’ }}>October 8, 2019 – November 11, 2019</span>

                               <i className=”far fa-calendar-alt pr-5px pull-right-position” style={{ float: ‘right’,marginRight:’5px’ }}></i> 

                           </div>

   </DateRangePicker>

</div>

● Date Range Component Properties

  • ranges
    • Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range.
  • showWeekNumbers
    • Show week numbers at the start of each week on the calendars.
  • timePicker
    • This property is used to weather have to show time picker also or not it requires boolean true or false value.
  • singleDatePicker
    • Show only a single calendar to choose one date, instead of a range picker with two calendars; the start and end dates provided to your callback will be the same single date chosen.
  • minDate
    • Date object, moment object or string) The earliest date a user may select
  • maxDate
    • (Date object, moment object or string) The latest date a user may select
  • Apply
    • This is a callback functions this will be triggered  after date has been selected.

● Sample Class Component

We have implemented bootstrap with the date range component in below code

import React,{Component} from “react”;

import asyncComponent from ‘../../../Router/async’;

import { Field, reduxForm, SubmissionError } from ‘redux-form’;

import  { Daterange , DatePicker }  from ‘../../../Component/Form/Datepicker’

import { FormValidation } from ‘../../../validation/forms’

import {renderToString} from ‘react-dom/server’;

   const handleFormSubmit=(values)=>{

       alert(JSON.stringify(values))

   }

   class DateRange extends Component{

       constructor(props){

           super(props);

           this.state ={

               singledatevalue:”,

               preview_data:{

                   timePicker:”false”,

                   label:’Date Range’,

                   singleDatePicker:”false”

               },

               execute_data:{

                   timePicker:”false”,

                   label:’Date Range’,

                   singleDatePicker:”false”

               }

           }

       }

       handleEvent=(event, picker)=>{

           if (picker.chosenLabel == ‘All’) {       

               this.setState({startdate:undefined,enddate:undefined,daterangevalue:’All’})      

           } else {

               this.setState({startdate:picker.startDate,enddate:picker.endDate,daterangevalue:picker.startDate.format(‘MMMM D, YYYY’)+’ – ‘+picker.endDate.format(‘MMMM D, YYYY’)})

           }

       }

       handledatepicker=(event, picker)=>{

          console.log(picker.startDate)

          //alert(picker.startDate)

          this.setState({singledate:picker.startDate,singledatevalue:picker.startDate.format(‘MMMM D, YYYY’)})

       }   

       componentToString(component) {

           return <pre>{component}</pre>

       }

        coverttoString(String) {

            return renderToString(String);

       }

 

       getdetails(){

           let props_sentence=`props:{timePicker:${(this.state.execute_data.timePicker==”true”)?true:false},label:’${this.state.execute_data.label}’}`

           return props_sentence;

       }

       gettabs(){

           return this.componentToString(`<Daterange apply={this.handleEvent.bind(this)} value=” label=’${this.state.execute_data.label}’ timePicker=${(this.state.execute_data.timePicker==”true”)?true:false} />`)

       }

       hadletextboxchange = (e) =>{

           let final_value = e.target.value

           try {

               final_value = JSON.parse(final_value);

               this.setState({

                   preview_data:{

                       timePicker:final_value.timePicker,

                       label:final_value.label,

                       singleDatePicker:final_value.singleDatePicker                      

                   }

               })

           }

           catch(error){

               alert(error.message)

           }

       }

       handleExecuteClick=()=>{

           console.log(‘preview_data’, this.state.preview_data)

           this.setState({execute_data:this.state.preview_data})

       }  

       render(){

       const { handleSubmit } = this.props;

       let status=(this.state.execute_data.timePicker==”true”)?true:false

       console.log(‘status’,status)

       return(

          <div>     <div class=”descriptions”>

           <h2>Date Range Component</h2>

           <p>

Date range component is to render the predefined date based on Today, Yestarday, last week, last month, last year and custom range as a Date range Picker or Single Date picker.

    </p>

       </div>

       <div class=”bd-example”>

       <Daterange  apply={this.handleEvent.bind(this)} value={this.state.daterangevalue} label=”Date Range Picker” singleDatePicker timePicker={true}  />

       </div></div>

       );

   }

}

export default reduxForm({

   form:’formcomponent’,

   validate:FormValidation

})(DateRange);

Note : Copy this code and past this in (src > Container > Pags > datepicker.js )  datepicker.js file

● Date Range Component Preview

After creating a date range class component you can run the react file and see the following output.

React Date component

● Single Date Component Preview

For single date selection just change the property to singleDatePicker={true}Date component

Installation

To write reusable component with react and redux  you need to install following npm module

  • npm install -g create-react-app

-g is used to install the npm module globally this will make the module  and –save is used while to save the installed module in package.json file.

Once after installing create-react-app run following commands to create a react project

  • Create-react-app reusable-component

The above command will create a reusable-component bundled with inbuilt npm modules such as react, react-dom. We need some more modules to create reusable components. Install following module

  • npm install –save react-redux
  • npm install –save redux
  • npm install –save bootstrap

After installing this module you need to import required function from the module to that make it easy to use

Folder Structure In React

There is no predefined structure  in react projects. It’s your idea to format the folders . Here we mentioned the best practices folder structure. We have splitted components into a container and presentational component according to the component usage which makes it easy to use.

react date component

admin

Open Source

Hoffensoft is a cloud services firm that specialises in delivering end-to-end enterprise solutions. We work closely with our clients to provide custom applications that empower them to derive the best out of their resources.

STAY CONNECTED


contact@hoffensoft.com 

Recent Posts

  • React Date Component December 24, 2019
  • React Collapse and carousel Component December 23, 2019
  • React Modal Popup Component December 23, 2019

Quick Links

  • Home
  • Success
  • About Us
  • Blog
  • Careers
  • Contact Us

Contact Us





© 2023 Hoffensoft.