CODEWITHSUNDEEP
javascriptfunctiondate
Amra
Amra

Reputation: 25268

Javascript function to convert date yyyy/mm/dd to dd/mm/yy

I am trying to create a function on javascript to bring the date from my database in format (yyyy-mm-dd) and display it on the page as (dd/mm/yy).

I would appreciate any help.

Thanks.

PD: Let me know if you need more clarification.

Upvotes: 24

Views: 116614

Answers (11)

Ali
Ali

Reputation: 135

Using toLocaleDateString is the best way to convert any date format:

const date: Date = new Date('2023-04-11');
return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    timeZone: 'UTC'
})

Upvotes: 0

Andy E
Andy E

Reputation: 344793

Easiest way, assuming you're not bothered about the function being dynamic:

function reformatDate(dateStr)
{
  var dArr = dateStr.split("-");  // ex input: "2010-01-18"
  return dArr[2]+ "/" +dArr[1]+ "/" +dArr[0].substring(2); //ex output: "18/01/10"
}

Upvotes: 23

V.S.
V.S.

Reputation: 1

function formatDate(date) {

  const [year, month, day] = date.split('-');

  return `${day}.${month}.${year}`;

};

Upvotes: -1

cmcodes
cmcodes

Reputation: 1876

Do it in one line:

date.split("-").reverse().join("-");

// 2021-09-16 => 16-09-2021

Upvotes: 33

Faridul Khan
Faridul Khan

Reputation: 2017

Try this:

function convertDate(dateString){
  var p = dateString.split(/\D/g)
  return [p[2],p[1],p[0] ].join("-")
}

convertDate("2001-9-11")//"11-9-2001"

Upvotes: 2

Hardik Pithva
Hardik Pithva

Reputation: 1745

You can also use destructuring and template literals in case you are sure that you will always receive a date in YYYY-MM-DD.

const changeDateFormatTo = date => {
  const [yy, mm, dd] = date.split(/-/g);
  return `${dd}/${mm}/${yy}`;
};

const formattedDate = changeDateFormatTo("2019-08-14");
console.log(`Formatted date is: ${formattedDate}`);

Upvotes: 1

Anandan K
Anandan K

Reputation: 1438

Use any one of this js function to convert date yyyy/mm/dd to dd/mm/yy

Type 1

function ChangeFormateDate(oldDate){
   var p = dateString.split(/\D/g)
   return [p[2],p[1],p[0] ].join("/")
}

Type 2

function ChangeFormateDate(oldDate)
{
   return oldDate.toString().split("/").reverse().join("/");
}

You can call those Functions by using : 

ChangeFormateDate("2018/12/17") //"17/12/2018"

Upvotes: 6

bbsimonbb
bbsimonbb

Reputation: 29022

It's a simple case, but everyone is using string methods! This is a little barbaric :-)

The Date object is all set up for this, and will get you much further once you get the hang of it. Your date has no timezone, so I suggest you force UTC both on the way in and the way out. The en-GB locale forces dd-mm, but you should bear in mind that English speaking users are split down the middle on date format, and each half finds the other's format totally confusing. You should really try and make your numeric date format adapt to the preferences of the user, especially since it's easy!

So...

new Vue({
  el: '#vueRoot',
  data: {kennedy: '1963-11-22'},
  computed:{
    kennedyDdmm(){
      return new Date(this.kennedy + 'T00:00:00Z')
      .toLocaleDateString('en-GB',{timeZone:'UTC'})
    },
    kennedyAuto(){
      return new Date(this.kennedy + 'T00:00:00Z')
      .toLocaleDateString([],{timeZone:'UTC'})
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='vueRoot'>
  <h1>in => {{kennedy}}</h1>
  <h1>dd-MM-yy => {{kennedyDdmm}}</h1>
  <h1>respect user prefs => {{kennedyAuto}}</h1>
</div>

Upvotes: 0

Ikai Lan
Ikai Lan

Reputation: 2240

You may also want to look into using date.js:

http://www.datejs.com

To futureproof your application, you may want to return time in a UTC timestamp and format with JavaScript. This'll allow you to support different formats for different countries (in the U.S., we are most familiar with DD-MM-YYYY, or instance) as well as timezones.

Upvotes: 2

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 828090

If you're sure that the date that comes from the server is valid, a simple RegExp can help you to change the format:

function formatDate (input) {
  var datePart = input.match(/\d+/g),
  year = datePart[0].substring(2), // get only two digits
  month = datePart[1], day = datePart[2];

  return day+'/'+month+'/'+year;
}

formatDate ('2010/01/18'); // "18/01/10"

Upvotes: 25

alemjerus
alemjerus

Reputation: 8268

Use functions getDateFromFormat() and formatDate() from this source: http://mattkruse.com/javascript/date/source.html
Examples are also there

Upvotes: 3

Related Questions