How to return the date in the Turkish format?

Question

I'm trying to create a function that converts the milliseconds to the date form which should be compatible to Turkish and formatted like "<2-digits of day>-<full name of month>-<4-digits of year>".

I've already tried the function .toLocaleDateString("tr-TR") but couldn't try the alternative libraries such as Momemtjs and Datejs that are server-included because I need this on the client-side. I've tried console.log() for every variable with or without .toString() and couldn't figure it out.

const dSelector = document.querySelectorAll(".date");
const formatDate = (de) => {
        var monthNames = [
          "Ocak", "Şubat", "Mart",
          "Nisan", "Mayıs", "Haziran", "Temmuz",
          "Ağustos", "Eylül", "Ekim",
          "Kasım", "Aralık"
        ];
        var date = new Date(de);
        var day = date.getDate();
        var monthIndex = date.getMonth();
        var year = date.getFullYear();
        return `${day}-${monthNames[monthIndex]}-${year}`;
}
dSelector.forEach((d) => {
    d.innerHTML = formatDate(d.innerHTML);
});

The expected output: "`<day>-<month>-<year>"

The actual output: "NaN-undefined-NaN"

momentJS can be used client-side. I can't speak for DateJS since I haven't used it. — ADyson, Aug 30 '19 at 15:02
Your problem is `new Date(de)`, so it's a parsing issue, not formatting. — RobG, Aug 30 '19 at 20:21

Shilly · Answer 1 · 2019-08-30T15:57:23.563

4

If you use the correct options argument for .toLocaleDateString(), you can get the format you want. Haven't found the option to add the dashes though, but a replace can fix that:

const date_input = document.querySelector( '#some_date' );
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};
const formatter = ms => new Date( ms )
  .toLocaleDateString("tr-TR", options )
  .replace( / /g, '-' );
  
// If we don't parse the string to a number, we get an invalid Date object:
const invalid_str = formatter( date_input.value );
console.log( invalid_str );

const valid_str = formatter( parseInt( date_input.value, 10));
console.log( valid_str );

<input id="some_date" value="1567180483137">

edited Aug 30 '19 at 15:57

answered Aug 30 '19 at 15:07

Shilly

8,511
1
18
24

This helped me a lot for the formatting but there's still a problem. I checked if ````d.innerHTML```` points to the milliseconds (any 13-digits long number in the range from 0 to 1,5*10^12 ) which seems valid to me. When I enter random milliseconds, I have valid dates but when it takes ````d.innerHTML```` as parameter, it returns ````NaN-undefined-NaN```` – Aug 30 '19 at 15:50
`.innerHTML` returns a string. Did you parse it into a number before using `new Date( de )` ? I have updated my answer. – Shilly Aug 30 '19 at 15:58

score 2 · Answer 2 · answered Aug 30 '19 at 15:04

Your function seems to work fine for me. Yo are probably inputting an unexpected date format.

formatDate('01/10/2019') ----> 10-Ocak-2018

while

formatDate('21/10/2019') ----> NaN-undefined-NaN

You can see under the WARNINGS section here the use of DD/MM/YYYY is undefined.

score -1 · Accepted Answer · answered Aug 30 '19 at 15:04

-1

There must be something wrong with your date variable. Check the input passed ("de" parameter). Maybe try d.innerText, it must be ISO format.

answered Aug 30 '19 at 15:04

TemporaryName

487
5
16

I checked it: its value is the milliseconds value which should work in the case of passing it as a parameter to new Date() – Aug 30 '19 at 15:52
Try to use parseInt() on your milliseconds value. – TemporaryName Aug 30 '19 at 15:55

How to return the date in the Turkish format?

3 Answers3