Having trouble retrieving the DD-MM-YYYY date format in Vue.js from MySQL database

Hi, I am struggling with setting the format of dateCreated (the date when the account was created) to DD-MM-YYYY.

In my Vue page, the code looks like this:

https://i.sstatic.net/8SSAE.png

The issue is that the website displays the date in the format shown here:

https://i.sstatic.net/446nK.png

I do not want it to display as YYYY-MM-DD T HH-MM-SS-SSS. Instead, I just want DD-MM-YYYY. Below is the mysql column for dateCreated:

https://i.sstatic.net/kGFux.png

Any help would be greatly appreciated. Thank you!

javascriptmysqlsqlvue.jsvue-component

Answer №1

To achieve the desired format, you have a couple of options:

SELECT DATE_FORMAT(dateCreated, "%d-%m-%Y") AS formattedDate

Alternatively, you can implement a Vue computed method:

computed: {
  formatDate() {
    const myDate = this.record.dateCreated;
    const formattedDate = ('0' + myDate.getDate()).slice(-2) + '/'
             + ('0' + (myDate.getMonth()+1)).slice(-2) + '/'
             + myDate.getFullYear();
    return 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

Zoom feature available on various images

My current setup includes one main image and multiple thumbnails that can be clicked to change the main image. The issue I encountered was when using jqzoom on the main image, the zoomed image would go blank after changing. After researching on stack overf ...

javascriptjqueryimage-manipulationzooming

If the checkbox in Php is marked as checked, the database will be updated to 1. If the checkbox is not checked,

echo "<form method='POST' action=''><br>"; $query = mysql_query("set names 'utf8'"); $query = mysql_query(" SELECT * FROM pages WHERE user_id = '$_SESSION[user_id]' ") or die(mysql_error()); while($pag ...

phpmysql

The locomotive scroll elements mysteriously vanish as you scroll, leaving the footer abruptly cut off

After successfully implementing locomotive scroll on my website, I encountered some issues when uploading it to a live server. Elements started bumping into each other causing flickering and disappearing, with the footer being cut off as well. It appears t ...

javascriptlocomotive-scroll

I am puzzled as to why I am not getting the updated value for variable1 in NODEJS. Can anyone

I need to update the variable COMPANYDATA in order to query a specific SCHEMA based on the company_data field of a user. javascript file 1: const {changeVariable, variable1 } = require('../lib/workshopdata'); customers.get('/', isLogg ...

mysqlnode.jsexpress

Is it better to use e.target instead of refs when testing?

I have been frequently creating components like this: <input ref="ckbx" type="checkbox" checked={this.props.checked} onChange={() => this.props.onChange(this.refs.ckbx.checked)} /> However, I recently realized that testing this is ...

javascriptunit-testingreactjs

SQL command using an OR statement

Here is the SQL command query that I am using: cmd.CommandText = "SELECT CONVERT(date, [DateTime]) 'Date of Download', ActionBy AS 'User Full Name', COUNT(DISTINCT CAST(Identifier AS NVARCHAR(10)) + Remarks + Link) 'Number of Docu ...

sqlcommand-text

Generating a sequential array of dates and times in Angular

Currently, I am working on implementing a feature that will allow users to see the available visit times between two dates they select, specifically from 8:00 to 17:00 every day. For instance: If a user selects 1 Sep to 4 Sep, the system should return [1. ...

javascriptangulardatedatetime

Ways to add elements to the DOM using jQuery from the local storage?

I'm facing a challenge where I have an input field and store the inputs in local storage. When I click on 'add', I want to immediately append the new inputs to my ul element. However, simply appending the current input won't work as it ...

javascriptjqueryappendlocal-storage

Guide on incorporating markdown in an ejs template

As I am planning to create a small blog using Express, EJS, and Markdown, I encountered an issue when trying to load Markdown on the page. Here is what I saw: https://i.sstatic.net/M2FEK.png Here's my code snippet: <!DOCTYPE html> <html la ...

javascripthtmlexpressejsblogs

Issue: setAllcategories function not found

Currently engaged in using Next.js and Sanity as a Headless CMS for the backend. In the code snippet below, I have created a Categories.js file in the components folder to fetch some data. My objective is to extract all the titles from the category Array. ...

javascriptreactjsnext.jssanity

"JavaScript: Issue Encountered While Converting Hexadecimal to Decimal

I've been working on a custom function to convert hexadecimal to decimal in my Scratch project: function Hex2Decimal(hex){ var deci = 0; var num = 1; var hexstr = String(hex); hexstr = hexstr.toLowerCase(); var expon = 0; for( ...

javascripthexdecimal

jQuery: Implementing a function for all elements, including those dynamically loaded through Ajax later on

I have implemented a jQuery function to resize text areas, but I need it to work on all text areas. The function works well for existing text areas: $(document.ready(function(){$("text_area").resizer('250px')}); However, it fails to resize tex ...

javascriptjqueryajax

What is the best way to incorporate a 'category filter' in Angular2?

Unique Scenario In my Angular2 application, I have implemented code in a component's view parent.component.html that iterates through an array of items and generates a new component for each item: <div class="list-items"> <!-- The colored ...

javascriptangularmasonryjquery-isotope

Selecting properties from a GeoJSON object on the fly with Leaflet

I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...

javascripthtmlleafletmapping

Is there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

javascriptjqueryhtml

React-querybuilder experiencing issues with validator functionality

While utilizing the react-querybuilder, I have encountered an issue with field validation not functioning correctly. Upon reviewing this StackBlitz, it appears that when clicking on Rule and checking all fields, there are no errors present. export const fi ...

javascriptreactjstypescriptquery-builder

Refreshing a web page in Internet Explorer can cause the HTTP Header content to be altered

As I monitor my dashboard retrieving continuous data from an SAP server, I stumbled upon a solution to fetch the current server date. This approach allows me to display when the dashboard was last updated, and this date is displayed in the DOM. //Method f ...

javascripthtmljsonxmlhttprequesthttp-headers

When a single object is modified in a JavaScript array, all the elements are affected

I am working with an array of 71 objects: var data = [] This array is populated with data from a database, containing both static and dynamic elements for each object in the data. angular.forEach(returnData,function(value,index) { if(!Array.isArray(va ...

javascriptarraysangularjs

Tips on resolving the flickering issue in dark mode background color on NextJS sites

One problem I am facing is that Next.js does not have access to the client-side localStorage, resulting in HTML being rendered with or without the "dark" class by default. This leads to a scenario where upon page reload, the <html> element momentari ...

javascriptreactjsnext.jsthemesuser-experience

React not showing multiple polylines on the screen

I'm currently working on an application aimed at practicing drawing Kanji characters. To draw the lines, I'm utilizing svg. The issue I've encountered is that when I try to draw multiple separate lines using a 2D array of points for each lin ...

javascriptreactjssvg