Transform the date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy with the help of JavaScript

I am looking to convert date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy when the dates are retrieved from a JSON object. Currently, I am utilizing the ng-csv plugin to download this JSON data, which is working properly. However, I need to implement a JavaScript function to handle the date format conversion. Below is an example of the JSON structure:

[{
    "Dates": "2016-09-27T18:30:00.000Z",
    "ABC": 40,
    "PQR": 1,
    "XYZ": 18
}, {
    "Dates": "2016-10-02T18:30:00.000Z",
    "ABC": 43,
    "PQR": 11,
    "XYZ": 8
}, {
    "Dates": "2016-10-03T18:30:00.000Z",
    "ABC": 6,
    "PQR": 76,
    "XYZ": 34
}]

Does anyone have any suggestions on how to achieve this conversion? Thank you in advance.

javascriptangularjsdate

Answer №1

Give this a try

function displayDate(inputDate) {

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

  var dateArr = inputDate.split('T')[0];
  var dateObj = new Date(dateArr);
  var day = dateObj.getDate();
  var month = dateObj.getMonth() + 1;
  var year = dateObj.getFullYear();
  alert(day +' '+ monthNames[month]  + ' ' +year);
  return  day +'-'+ monthNames[month] + '-' +year
}

displayDate('2016-09-27T18:30:00.000Z');

var dateData = [
 {
"Dates": "2016-09-27T18:30:00.000Z",
"ABC": 40,
"PQR": 1,
"XYZ": 18
},{
"Dates": "2016-10-02T18:30:00.000Z",
"ABC": 43,
"PQR": 11,
"XYZ": 8
},{
"Dates": "2016-10-03T18:30:00.000Z",
"ABC": 6,
"PQR": 76,
"XYZ": 34
}
];
var storage = [];
for(var index=0; index<dateData.length;index++){

  storage[index] = displayDate(dateData[index].Dates);
}

console.log(storage);

Link to Functional Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

javascriptjqueryhtmlcssanimation

Does the modularization of code impact the performance of the react-app?

The client provided me with a React app that includes an index.jsx file where 90% of the coding has been completed. To prevent getting stuck in Scroll Limbo, I have started breaking down the code into modules for each specific requirement. These include ...

javascriptreactjs

What steps do I need to take in order to generate a legitimate link annotation within Adobe Acrobat by utilizing Acrobat

Seeking guidance on how to embed an Acrobat Javascript within Adobe Acrobat in order to generate a link annotation. The current method involves using the "addLink" function within the document object, which triggers a Javascript action upon clicking the li ...

javascriptpdfacrobatacrobat-sdk

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms

Tips for Dynamic Importing and Rendering of Components in ReactJS

I'm looking to dynamically import and render a component in React. I have two components - Dashboard and Home. Essentially, I want to dynamically render the Dashboard Component inside the Home Component without having to import it beforehand or maybe ...

javascriptreactjs

Implement a menu that can be scrolled through, but disable the ability to scroll on the body of the website

When viewed on a small screen, my website transforms its menu into a hamburger button. Clicking the button toggles a sidebar displaying a stacked version of the menu on top of the normal website (position: fixed; z-index: 5;). This sidebar also triggers a ...

javascriptjqueryhtmlcssiphone

Leveraging Promises with Angular $resource

How can I implement promises with $resource in my Angular service? Here is a snippet from my service: app.service("friendService",function( $resource, $q ) { // Define public API functions. return({ addFriend: addFriend, ...

javascriptangularjsangular-resourceangular-promise

A guide on transferring variables to sessions instead of passing them through the URL in PHP

<a class='okok' id='$file' href='" . $_SERVER['PHP_SELF'] . "?file=" . $file . "'>$file</a> The given code snippet represents a hyperlink that passes the filename to the 'file' variable, which ...

javascriptphpjqueryajaxsession

Incorporating PWA functionality into Next.js for seamless notifications and push notifications

I've been working on developing a Progressive Web App (PWA) using next.js and running into some challenges. My goal is to incorporate device motion, geolocation, and notifications into my users' accounts. I'm taking inspiration from this r ...

javascriptreactjsnext.jsprogressive-web-appsworkbox

Stellar.js is malfunctioning

I've been attempting to implement a parallax effect using Stellar.js with two image tag elements, but I'm encountering issues. Despite trying various configurations, including following the Stellar.js creator's tutorial scripts closely, noth ...

javascriptjqueryhtmlcss

Tell webpack to exclude a specific import

Currently, I am in the process of developing a desktop application using ElectronJS and ReactJS. To bundle the renderer process that utilizes JSX, I have opted to use webpack. An issue arises when attempting to import anything from electron into the rend ...

javascriptreactjswebpackelectron

Adjust Text to Perfectly Fit Button

I am developing a quiz using bootstrap and javascript. One issue I encountered is that the text in the buttons can sometimes be longer than the button itself. This results in the text not fitting properly within the button, making it unreadable on mobile ...

javascripthtmlcsstwitter-bootstrap-3

Discovering ways to showcase JSON response in JavaScript or PHP

Currently, I am integrating the Coin Warz API into my website. The API sends responses in JSON format. I have attempted to display this data in a table format using PHP, but unfortunately, I am encountering difficulties. The JSON Response is as follows: [ ...

javascriptphpjson

Postponing the loading of a controller until the model is fully loaded without relying on routes

One way to delay the changing of routes until the model is fully loaded is by using a resolve object. To learn more, visit: Delay changing routes until model loaded Is there a similar approach that can be taken for controllers without involving routes? ...

angularjs

Is it a problem with Cucumber Js callbacks or a feature issue?

I would like to create a scenario similar to this: Scenario: initialize new Singleton When an unmatched identity is received for the first time Then create a new tin record And establish a new bronze record And generate a new gold record This s ...

javascriptcallbackcucumbercucumberjs

Removing leading zeros from numeric strings in JSON data

I am facing an issue with my jQuery-based JavaScript code that is making an Ajax call to a PHP function. updatemarkers.xhr = $.post( ih.url("/AjaxSearch/map_markers/"), params).done( function(json) { <stuff> } The PHP function returns the follo ...

javascriptphpjsonajax

What is the best way to integrate Google Analytics into a Next.js application without the need for an _app.js or _document.js file?

I'm encountering some challenges while trying to incorporate Google Analytics into my Next.js application. One issue I'm facing is the absence of an _app.js or _document.js file in the project structure. Additionally, I notice that when I include ...

javascripttypescriptgoogle-analytics

Struggling to efficiently handle imported JSON data using VUE.JS JavaScript?

Struggling to extract specific information from JSON data that I need to import. Here is the sample data I'm working with: I am trying to extract details like the name, description, and professor for each entry. This is how I'm importing the d ...

javascriptjsonparsingvue.jsjavascript-objects

Preventing default form submission in jQuery: How to cancel it when a certain condition is met

I have a contact form where I validate the input values upon clicking on the submit button. If there is at least one empty input, I trigger an alert and prevent the form submission by using preventDefault. However, if all inputs are filled and submitted, t ...

javascriptjqueryhtmlforms

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss