DEV Community: Md. Azad Ul Kabir

Custom Date range picker with React JS and React-Datepicker

Md. Azad Ul Kabir — Sat, 16 Nov 2024 05:11:55 +0000

This component completely reusable component you can just copy and past it will be work and look like below images.

Here we need two files one is jsx file and one is css file both of the file given below.

DateRangePicker.jsx

import React, { useState, useEffect, useRef } from "react";
import DatePicker from "react-datepicker";
import { addDays, subDays, format, subMonths, isAfter, isBefore } from "date-fns";

// Import Css
import "react-datepicker/dist/react-datepicker.css";
import "./daterange.css";

const DateRangePicker = ({ onChange }) => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [dateType, setDateType] = useState("today");
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [selectedRange, setSelectedRange] = useState(format(new Date(), "yyy-MM-dd"));
  const [activeRange, setActiveRange] = useState("Today");
  const [manualDate, setManualDate] = useState([
    "Today",
    "Yesterday",
    "Last 7 Days",
    "Last Month",
    "Last 3 Month",
    "Last Year",
    "LifeTime"
  ]);

  // Temporary state for handling date selection before confirmation
  const [tempStartDate, setTempStartDate] = useState(new Date());
  const [tempEndDate, setTempEndDate] = useState(null);

  // Ref to the date picker container for detecting outside clicks
  const datePickerRef = useRef(null);

  const handleDateChange = (dates) => {
    const [start, end] = dates;
    setStartDate(format(start, "yyy-MM-dd"));
    setEndDate(format(end, "yyy-MM-dd"));
    setTempStartDate(start);
    setTempEndDate(end);
    setDateType("custom");
  };

  const handleConfirm = () => {
    if (tempStartDate.getTime() === tempEndDate?.getTime()) {
      setSelectedRange(format(tempStartDate, "yyy-MM-dd"));
    } else {
      setSelectedRange(`${format(tempStartDate, "yyy-MM-dd")} - ${format(tempEndDate, "yyy-MM-dd")}`);
    }
    setShowDatePicker(false);
    onChange({ dateType: dateType, startDate: dateType === "custom"?"":startDate?.toString(), endDate: dateType === "custom"?"": endDate?.toString() });
  };
  console.log(startDate, endDate, dateType, "date");

  const setCustomRange = (range) => {
    const today = new Date();
    let start, end;

    switch (range) {
      case "Today":
        start = today;
        end = today;
        setDateType("today");
        break;
      case "Yesterday":
        start = subDays(today, 1);
        end = today;
        setDateType("yesterday");
        break;
      case "Last 7 Days":
        start = subDays(today, 6);
        end = today;
        setDateType("lastWeek");
        break;
      case "Last Month":
        start = subMonths(today, 1);
        end = today;
        setDateType("lastMonth");
        break;
      case "Last 3 Month":
        start = subMonths(today, 3);
        end = today;
        setDateType("lastTriMonth");
        break;
      case "Last Year":
        start = subDays(today, 365);
        end = today;
        setDateType("lastYear");
        break;
      case "LifeTime":
        start = new Date(2015, 0, 1);
        end = today;
        setDateType("overview");
        break;
      default:
        break;
    }

    // Update the active range
    setActiveRange(range);

    // Set the range in temporary state without confirming
    setStartDate(format(start, "yyy-MM-dd"));
    setEndDate(format(end, "yyy-MM-dd"));
    setTempStartDate(start);
    setTempEndDate(end);
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (datePickerRef.current && !datePickerRef.current.contains(event.target)) {
        setShowDatePicker(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div className="relative daterange">
      <div className="relative w-full max-w-xs">
        <input
          type="text"
          value={selectedRange}
          placeholder="Select a date range"
          onFocus={() => setShowDatePicker(true)}
          readOnly
          className="w-full max-w-xs p-2 border bg-white border-gray-50 rounded shadow-sm text-gray-600 text-sm font-semibold placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-offset-slate-100 cursor-pointer"
        />
        <span className="absolute inset-y-0 right-2 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
            <path d="M19 3h-2V1h-2v2H9V1H7v2H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 1.99-.9 1.99-2L21 5c0-1.1-.89-2-1.99-2zM5 5h14v14H5V5z" />
          </svg>
        </span>
      </div>

      {showDatePicker && (
        <div ref={datePickerRef} className="absolute right-0 flex bg-white rounded-lg shadow-md">
          <div className="py-6 px-4 flex flex-col text-nowrap items-start gap-y-2 text-lg font-normal text-gray-800 shadow-md">
            {manualDate.map((range) => (
              <button key={range} className="flex items-center gap-x-1" onClick={() => setCustomRange(range)}>
                <span className="relative inline-block w-5 h-5 rounded-full border border-gray-300 bg-white">
                  <span
                    className={`absolute inset-1 rounded-full ${activeRange === range ? "bg-[#F7E5BE]" : ""}`}
                  ></span>
                </span>
                {range}
              </button>
            ))}
          </div>

          <div className="pt-6 px-4">
            <DatePicker
              selected={tempStartDate}
              onChange={handleDateChange}
              startDate={tempStartDate}
              endDate={tempEndDate}
              selectsRange
              inline
              monthsShown={2}
              maxDate={new Date()}
            />
            <div className="flex justify-end items-center py-4">
              {/* <div>
                <h2 className="text-sm font-semibold text-gray-600">Selected Date: {selectedRange}</h2>
                <p className="text-xs font-normal text-gray-400 capitalize">Dates are shown in Asia/Dhaka</p>
              </div> */}
              <button
                onClick={handleConfirm}
                class="px-3 py-1.5 bg-blue-500 rounded hover:bg-blue-600 text-xs font-semibold text-white uppercase"
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default DateRangePicker;

daterange.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

.daterange .react-datepicker {
  font-family: "Open Sans", serif;
  display: flex;
  border: none;
}
.daterange .react-datepicker__header {
  background-color: transparent;
  border: none;
}

.daterange .react-datepicker__navigation-icon:before {
  color: rgb(31, 41, 55);
  border-width: 2px 2px 0 0;
  top: 12px;
}
.daterange .react-datepicker__current-month {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #1f2937;
}
.daterange .react-datepicker__day-name {
  font-size: 12px;
  font-weight: 600;
  color: rgb(156 163 175);
  padding-bottom: 6px;
}

.daterange .react-datepicker__day {
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
}
.daterange .react-datepicker__day--disabled {
  color: rgb(156 163 175);
  cursor: not-allowed;
}
.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__month-text--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__quarter-text--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__year-text--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__day-selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
.react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
.react-datepicker__day--selected:not([aria-disabled="true"]):hover,
.react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover {
  background-color: #f7e5be;
  border-radius: 4px;
}

All About JavaScript Array

Md. Azad Ul Kabir — Mon, 01 Jul 2024 16:15:40 +0000

Here I am trying to elaborate on JavaScript Array features and built-in methods. I believe you can find this useful.

Please click the below link to read this Article
🚀 Link: Article Link

Follow more articles like this follow me.
🚀Link: Azad Ul Kabir

All About JavaScript string

Md. Azad Ul Kabir — Thu, 27 Jun 2024 16:31:43 +0000

Here I am trying to elaborate on JavaScript strings and built-in methods. I believe you can find this useful.

Please click the below link to read this Article
🚀 Link: Article Link

Follow more articles like this follow me.
🚀Link: Azad Ul Kabir

All About JavaScript Object

Md. Azad Ul Kabir — Wed, 26 Jun 2024 12:30:42 +0000

Here I am trying to elaborate on JavaScript Arrays features and built-in methods. I believe you can find this useful.

Please click the below link to read this Article
🚀 Link: Article Link

Follow more articles like this follow me.
🚀Link: Azad Ul Kabir

React Router not working after "React app" published through GitHub actions

Md. Azad Ul Kabir — Tue, 14 May 2024 15:00:34 +0000

If your React application is not working properly after being published on GitHub Pages, it's often related to the routing configuration. Here are a few common issues and their solutions:

1. Configuring React Router for GitHub Pages

GitHub Pages serves the index.html for all 404 responses by default, which means when using React Router, you need to ensure all routes fall back to index.html.

Solution
Add a 404.html file that contains the same content as your index.html file. This way, any invalid routes will serve your index.html and React Router will handle the routing.

2. Ensure the Correct homepage in package.json

Make sure you have the correct homepage field in your package.json. This helps with resolving the paths correctly.

{
  "name": "your-app",
  "version": "0.1.0",
  "homepage": "https://your-username.github.io/your-repo-name",
  ...
}

3. Change the "private" property value in package.json

Change the private property value from true to false.

{
  "name": "your-app",
  "version": "0.1.0",
  "private": false,
}

4. Need to add root path to the basename prop of BrowserRouter

If you are not using BrowserRouter, You need to add your root path to the basename prop of BrowserRouter

import {BrowserRouter} from 'react-router-dom'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)

5. If BrowserRouter is not working use HasRouter

GitHub Pages doesn't support single-page applications (SPA) routing out of the box with BrowserRouter because it relies on client-side routing. A common workaround is to use HashRouter, which uses the URL hash to keep track of the route.

import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <HashRouter >
    <App />
  </HashRouter >,
  document.getElementById('root')
);

6. Check CNAME

If you are using a custom domain with GitHub Pages, ensure your CNAME file is correctly set up and included in your public directory.

my-app/
  public/
    index.html
    404.html
    CNAME (if using a custom domain)
  src/
    App.js
    index.js
  package.json

Truthy And Falsy Value In JavaScript.

Md. Azad Ul Kabir — Thu, 02 Mar 2023 05:34:31 +0000

There are two most important terms to understand when you execute some code based on an "if else" statement. Truthy and Falsy value.
Truthy value: Data types that return true by default are called truthy.
False value: Data types that return false by default are called falsy

All values are truthy except these values
+0 or -0
BigInt zero (0n)
Empty String ("")
null, undefined, and NaN

For example below this code we are performing a Linear search. But when I apply a condition for "value not found" I have a complexity for array index 0. Because it's a falsy value if I use the findIndex variable value as an 'if' condition. I solved this in my way. But there have several ways to solve this.

Git Basic Commands That You Need For Regular Project Work

Md. Azad Ul Kabir — Tue, 24 Jan 2023 06:47:51 +0000

I am trying to list some commands above the work criteria. Check this below

Git Initial Command:

1. git init
2. git status
3. git --version
4. rm -rf .git  //Remove git folder
5. git status -s

Git Configuration Command:

1. git config --global user.name "username"
2. git config --global user.email "email"
3. git config --list
4. git config --global alias.last "log -p -1"  //Create alias for shortcut

Git File Add Command:

1. git add .   //Stages new and modified file without deleted file
2. git add -A  //Stages all file
3. git add -u  //Stages modified and deleted file without new file

Git Commit Command:

1. git commit -m "messeage"
2. git commit -a -m "message"  //Stage file commit without add
3. git commit --amend          //Change the last commit

Git Commit Log Command:

1. git log
2. git log -p -2
3. git log --stat
4. git log --pretty=oneline
5. git log --pretty=short/full
6. git log --pretty=format:"%h 00 %ae"
7. git log --since=2.days/weeks/months/years

Git Branch Command:

1. git branch
2. git branch `branchName`
3. git checkout `branchName`
4. git merge `branchName`                 //Branch must be master
5. git branch -v
6. git branch --merged
7. git brach --no-merged
8. git branch -d `branchName`             //Locally deleted
9. git push origin --delete `branchName`  //Deledted on github
10. git checkout -b "branchName"          // Create brach and switch to the created branch

Git Compare Command

1. git diff `fileName`           //Difference tracked file code between last commit file to now
2. git diff --staged `filename`  //Difference Stages file code between last commit file to now
3. git reset `fileName`          //Stages file to unstages file
4. git checkout `fileName`       //Clear file to last commit
5. git checkout -f               //For all file
6. git rm --cached `fileName`    //Tracked file to Untracked file

Git Command For Github

1. git remote add origin `url`
2. git remote rm origin
3. git push -u origin master
4. git pull origin master
5. git remote -v
6. git clone `url`

Git Extra Command

1 .gitignore
2. git rm `fileName`
3. git mv `fileName1` `fileName2`  //Change the filename & fileName2 is changed name.

NOTE: If you don't understand any command, find out on Google. This way you can learn about git commands properly and have a crystal clear idea on git commands. Keep exploring.

Redux Vs Redux Toolkit

Md. Azad Ul Kabir — Sun, 15 Jan 2023 19:16:03 +0000

Difference Between Redux & Redux Toolkit.

First of all, before knowing the difference between redux and redux toolkit we must know what definition two of this is.

Redux: Redux is an open-source JavaScript library for managing and centralizing application states.

That means if you have a state(like a variable) or many states that need to many components or modules. So you need to make globalize those states to easily access them. Redux does this work for us.

Redux Toolkit: Redux Toolkit is a set of tools that helps simplify Redux development.

In other words, if I configure something through redux, as hard as it will be, but the same task we can perform it easily with the redux toolkit.

Redux VS Redux Toolkit

Some of the differences are highlighted below

In Redux you must configure Devtools but in the Redux toolkit, you don't have to configure. Because it already has.
In Redux for asynchronous performance you need to add Redux Thunk, But in the Redux toolkit, it's already built-in.
Redux requires too much boilerplate code but the Redux toolkit doesn't.

What Should I learn?

In my preference, you should learn the Redux toolkit. It also depends on other requirements.

But before learning the Redux toolkit you must learn Redux basics. Because, you have to crystal clear concept about Action, Reducer, and **Store **and their work procedure. After that, you can jump to the Redux toolkit.

React Redux Toolkit Roadmap.

Their three things that you have to learn to use redux in your react app and the learning sequence is below. (Top to bottom)

Redux (Basic must).
React Redux. After that
Redux Toolkit.

If you are a beginner you can follow this tutorial playlist. I hope it helps you a lot.

Tutorial Link