Exploring Date Formatting in JavaScript: A Comprehensive Guide

Introduction:
Dealing with dates and customizing their format to meet specific needs is a frequent task in web development. JavaScript offers several built-in approaches and tools to modify and format dates. This article will examine a code example that showcases date formatting and its application in various situations. We'll delve into the code and grasp its functionality in a systematic manner.

Code Explanation:
The provided code consists of several functions related to date formatting. We will explain each function individually to grasp their purpose and usage.

GetJsonDate(dateRange):

const GetJsonDate = (dateRange) => {
  if (dateRange?.length > 1) {
    const startDay = String(dateRange[0]?.getDate()).padStart(2, "0");
    const startMonth = String(dateRange[0]?.getMonth() + 1).padStart(2, "0");
    const startYear = dateRange[0]?.getFullYear();

    const endDay = String(dateRange[1]?.getDate()).padStart(2, "0");
    const endMonth = String(dateRange[1]?.getMonth() + 1).padStart(2, "0");
    const endYear = dateRange[1]?.getFullYear();

    const start_date = startYear + "-" + startMonth + "-" + startDay;
    const end_date = endYear + "-" + endMonth + "-" + endDay;
    return JSON.stringify({ start_date, end_date });
  } else {
    return JSON.stringify({});
  }
};

getJsonDateToShowFollowUpReport(startDate, endDate):

export const getJsonDateToShowFollowUpReport = (startDate, endDate) => {
  const startDay = String(startDate.getDate()).padStart(2, "0");
  const startMonth = String(startDate.getMonth() + 1).padStart(2, "0");
  const startYear = startDate.getFullYear();

  const endDay = String(endDate.getDate()).padStart(2, "0");
  const endMonth = String(endDate.getMonth() + 1).padStart(2, "0");
  const endYear = endDate.getFullYear();

  const start_date = `${startYear}-${startMonth}-${startDay}`;
  const end_date = `${endYear}-${endMonth}-${endDay}`;
  return { start_date, end_date };
};

GetFromatDate(dateRange):

export const GetFromatDate = (dateRange) => {
  if (dateRange?.length > 1) {
    const startDay = String(dateRange[0]?.getDate()).padStart(2, "0");
    const startMonth = String(dateRange[0]?.getMonth() + 1).padStart(2, "0");
    const startYear = dateRange[0]?.getFullYear();

    const endDay = String(dateRange[1]?.getDate()).padStart(2, "0");
    const endMonth = String(dateRange[1]?.getMonth() + 1).padStart(2, "0");
    const endYear = dateRange[1]?.getFullYear();

    const start_date = startYear + "-" + startMonth + "-" + startDay;
    const end_date = endYear + "-" + endMonth + "-" + endDay;
    return ({ start_date, end_date });
  } else {
    return ({});
  }
};

Similar to the GetJsonDate function, this function takes a date range and returns an object with formatted start and end dates.
It follows the same logic as the GetJsonDate function to extract and format the day, month, and year components from the date range.
handleFormatDate(dateValue):

export const handleFormatDate = (dateValue) => {
  let todayDate = new Date(dateValue),
    day = "" + todayDate.getDate(),
    month = "" + (todayDate.getMonth() + 1),
    year = todayDate.getFullYear();
  if (day.length < 2) {
    day = "0" + day;
  }
  if (month.length < 2) {
    month = "0" + month;
  }
  let fullDate = day + "/" + month + "/" + year;
  return fullDate;
};

This function takes a date value as input and returns a formatted date string in the format "DD/MM/YYYY".
It converts the input date value into a Date object.
The day, month, and year components are extracted from the Date object.
If the day or month values have a single digit, a leading zero is added for consistency.
Finally, the formatted date string is returned.
handleFormatInputDate(dateValue):

export const handleFormatInputDate = (dateValue) => {
  let todayDate = new Date(dateValue),
    day = "" + todayDate.getDate(),
    month = "" + (todayDate.getMonth() + 1),
    year = todayDate.getFullYear();
  if (day.length < 2) {
    day = "0" + day;
  }
  if (month.length < 2) {
    month = "0" + month;
  }
  let fullDate = year + "-" + month + "-" + day;
  return fullDate;
};

src
This function takes a date value as input and returns a formatted date string in the format "YYYY-MM-DD".
It follows a similar logic to the handleFormatDate function to extract and format the day, month, and year components.
Conclusion:
In this blog post, we explored a code snippet that demonstrates various date formatting techniques in JavaScript. We examined functions that convert date ranges and individual dates into specific formats like JSON strings and formatted date strings. Understanding date manipulation and formatting in JavaScript is essential for web developers dealing with date-related operations. By grasping the concepts explained in this blog post, developers can effectively handle and present date information according to specific requirements in their projects.