Having trouble with customizing date time format in chart.js using pure vanilla JavaScript

I am attempting to display the date in the format "YYYY-MM-DD HH:mm", but when I try like this:

     const formatDate = "YYYY-MM-DD HH:mm";

  mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);

 const a = new Chart(canvasElement, {
    data: {
      labels: mikeFWLabelChart,
      datasets: [{
        type: 'line',
        label: 'Метра',
        data: mikeFWDataChart,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type:       "time",
          time:       {
              format: formatDate,
              tooltipFormat: 'll'
          },
          scaleLabel: {
              display:     true,
              labelString: 'Date'
          }
      }],
      yAxes: [{
          scaleLabel: {
              display:     true,
              labelString: 'value'
          }
      }]
      }
    }
  })
};

I receive an error on the X axis INVALID DATE..

Also, I am trying to change the date format without using moment.js code:

mikeFWLabelChart = moment(mikeFWLabelChart).format(formatDate);

with options code -> format But they still look like this format: 2023-02-16T05:00:00.000Z

How can I change the date format to YYYY-MM-DD HH:mm ?

Answer №1

When utilizing moment.js, the process looks like this:

const formatDate = "YYYY-MM-DD HH:mm";
const date = new Date("2023-02-16T05:00:00.000Z");
const formattedDate = moment.utc(date).format(formatDate);
console.log(formattedDate)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

If using .toISOString(), the steps are as follows:

const date = new Date("2023-02-16T05:00:00.000Z").toISOString();
const formattedDate = date.slice(0, 16).replace("T", " ");
console.log(formattedDate); 

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

Struggling to make $.ajax.mostRecentCall function properly in jasmine 2.0.2

Struggling to make a basic example work properly. I found this code snippet on https://gist.github.com/Madhuka/7854709 describe("Check for spies", function() { function callFunction(callbacks, configuration) { $.ajax({ url: configurat ...

Struggling with the nodejs peepcode tutorial - need some help getting it to run

After purchasing and following the latest nodejs peepcode tutorial, I have hit a roadblock at the initial step. I have spent hours trying to debug my code, but tracing errors in nodejs seems like solving a riddle to me. My app structure is as follows: e ...

Creating an array in Angular is done by using the syntax []

I encountered an error and I'm not sure how to fix it. Can someone assist me? The error message reads: "Type '{ animal:[{ id : 1,name: "Elephant"},{id : 2, name: "Horse"} []; }' is not assignable to type 'string[]'. Property & ...

Angular 6 custom elements encounter syntax and shadow DOM errors on IE11 and Firefox, causing failures

After following a set of instructions found on this website, I successfully created a new angular-cli project with a custom element that functions perfectly on Chrome. However, when adding the necessary polyfills for Internet Explorer, I encountered an iss ...

Is it possible for an image to be displayed in another div or table column when I hover my mouse over it?

I am looking to create an image gallery with thumbnails on the left side. When I hover over a thumbnail, I want the full image to be displayed in another section on the page. Can anyone provide me with the correct code or suggest a plugin to achieve this f ...

What is the best way to reference a nested jQuery variable, whether global or local, within an HTML document

I've been working on this problem for days with no success. Any help would be greatly appreciated. I'm trying to call a variable from nested jQuery into HTML. The variable is named "PROBLEM". Even after trying to make it global, any updates made ...

Error: ReactJs unable to find location

I'm attempting to update the status of the current page when it loads... const navigation = \[ { name: "Dashboard", href: "/dashboard", current: false }, { name: "Team", href: "/dashboard/team", current: fa ...

Migrating webpack.dev.config from Webpack version 1 to version 4

As I work on updating the open source site, ReForum, to the latest components such as webpack 4 and react 16, I encountered some challenges. Starting with babel was smooth, but transitioning to webpack proved to be more time-consuming. After trying various ...

Establishing a system for utilizing barcode multimarkers in AR.js

Currently, I am attempting to configure AR.js for multimarkers, as illustrated in this image: barcode markers on wall. The plan is to display a single video within the area encompassed by the markers. Despite my efforts to set up the multimarker player an ...

Showing various records dynamically with AngularJS

I have some AngularJS Code below where I am currently adding four records to roleList. However, I would like to be able to add any number of records to roleList. Is there a way for me to achieve this? $scope.roleList = [ {"companyName": "Company 01" ...

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

Concealing items in a loop using Javascript

I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question : Here is the HTML code snippet: <div class="a b"> <span class="one">Success ONE</span> <span class="two">ONE</span> </div> <div class="a b"> <span class="one">Success TWO< ...

Vue's push() method is replacing existing data in the array

I'm currently facing an issue where I am transferring data from a child component, Form, to its parent component, App. The data transfer is functioning correctly, however, when attempting to add this data to the existing array within the App component ...

JQuery unable to make a successful Web Service request

Can someone provide assistance with setting up a JQuery Ajax call to a web service? I've encountered an issue where the web service does not return any data, even when parameters are passed. I suspect there might be a syntax error in the 'url:&ap ...

In order to display() or delete() a specific element based on the logged-in user, it is necessary

(function($){ $(document).ready(function() { $('.nlgchat').hide(); // hiding the chat section by default var usernames = ['Mr.EasyBB','runawayhorses','BL@DE','SirChivas']; var nameslist='&ap ...

What is the most effective method for updating input names when dynamically incorporating them into a form?

Looking for a smart and efficient way to manage form input names when dynamically adding more to the POST array. Consider the initial form setup below: <fieldset> <input type="text" name="users-0.firstname" /> <input type="text" name ...

CSS navbar issue: The positioning of the text selection rectangle and drop-down menu is causing problems

While working on creating a navbar, I encountered an issue when hovering over an item (such as "Company") to display the dropdown menu below. https://i.sstatic.net/KbuwLPGy.png The problem lies in the positioning of the green selection rectangle, which i ...

What is the process for obtaining a fresh token from Cognito using the frontend?

Currently, I am working with a react app that utilizes Cognito for user authentication. My main query revolves around making a call to Cognito using the refresh token in order to receive a new token. Despite researching various examples provided by Cognit ...

A guide to pulling pictures from a database with the help of jquery and servlets

Currently, I am facing a challenge in retrieving images stored in my Oracle 11g R2 database. My approach involves using JQuery and servlet to fetch the images and displaying them within a CSS division. However, as I am unfamiliar with this process, I bel ...