manipulate data from Date function

How to manipulate data from Date function to different formats in best ways

by

The Date function returns current date of the user from the location and device they are accessing any application. We may at times need to portray this data in various formats. Let’s learn how we can manipulate data from Date function in various formats. The string returned from using Date() function is typically as follows.

Mon Jan 09 2023 12:46:21 GMT+0400

Suppose you want to make it appear like as below.

Monday, January, 12:46 PM

We can format the string returned in three separate parts.

getFullYear()

The method can be used on the date string returned above, to get the complete year. The syntax is as follows.

date.getFullYear();

In our case, this reads 2023. But, we don’t need to print the year in the current example, so lets move forward to get the day, month, and time.

getDay()

You can create an array of days and pass the date.getDay() method to it. This gets the day part, i.e. Mon from the string and parses it as per defined in the array.

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
		var current_day = days[date.getDay()];
		console.log(current_day);

The date.getDay() method typically returns the day of the week (from 0 to 6) of a date. starting from Sunday. By passing the date.getDay() method to days array, you are actually passing the number 2, i.e. for the day Mon to the array. In turn it displays Monday. You can pass the 2nd day in any format you want and use it with the date.getDay() metho.

getMonth()

Similarly you can also return the month, using a date.getMonth() method as shown below.

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
		var current_month = months[date.getMonth()];
		console.log(current_month);

This will return the current month in number from 0-11. In our case, it will be 0, i.e. January. So when we pass the date.getMonth() method to months array, it prints out the month we wrote at 0 location, i.e. January. You may write the 0 location month in any format you wish for, e.g. 01, Jan, or January,

getTime()

To extract the time from the complete string you can use the date.toLocaleTimeString() method as shown below. However, as in our case, if you want to format the time to just show hours and minutes, you can pass the replace() method to the full_time variable, and replace the seconds (or last part) with an empty string.

var full_time = date.toLocaleTimeString();  // -> "7:38:05 AM"
		const current_time = full_time.replace(/:\d+ /, ' ');
		console.log(current_time);

The pattern shown above can be useful to remove seconds from the complete time.

Now to format the complete date as described above, (Monday, January, 12:46 PM). We can concatenate the strings returned from each function. i.e.

var preview_data = current_day+", "+current_month+", "+current_time;
console.log(preview_data); // consoles Monday, January, 12:46 PM

We can also apply these methods on date returned after reading from a different time zone. For example.

const zone2_date = changeTimeZone(date, zone2);
		console.log("zone 2 time...",zone2_date); // 
		var current_day_zone2 = days[zone2_date.getDay()];
		var current_month_zone2 = months[zone2_date.getMonth()];
		var full_time_zone2 = zone2_date.toLocaleTimeString();  
		const current_time_zone2 = full_time_zone2.replace(/:\d+ /, ' ');

The same functions are applied to manipulate data from the date of zone 2 returned by the changeTimeZone(date, zone2) function.