d3 locale time format

Question

I want to change my months and days language to my language with d3 time format v6. I use some method

method 1:

const localeTime = {
    "days": ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
    "months": ["Januari", "Februari", "Maret", "April", "Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"]
  };
  
  const localeFormat = d3.locale(localeTime);
  
  const formatTime = localeFormat.timeFormat("%d %B %Y");
  
  console.log(formatTime(date));

I get d3.locale is not a function error. Then I change to d3.timeFormatLocale and d3.timeFormatDefaultLocale (Method 2)

Method 2:

const localeTime = {
    "days": ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
    "months": ["Januari", "Februari", "Maret", "April", "Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"]
  };
  
  const localeFormat = d3.timeFormatLocale(localeTime);
  
  const formatTime = localeFormat.timeFormat("%d %B %Y");
  
  console.log(formatTime(date));

I get this error

Cannot read property 'map' of undefined
    at wy (VM25 d3.min.js:2)
    at Object.py [as timeFormatLocale] (VM25 d3.min.js:2)

when I don't use the locale as the formatter, the format still won't work because of the locale definition

const localeTime = d3.timeFormatLocale({
    "days": ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
    "months": ["Januari", "Februari", "Maret", "April", "Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"]
  });
  
  const formatTime = d3.timeFormat("%d %B %Y"); //I don't use the locale this time
  
  console.log(formatTime(date)); //It should be normally formatted as English date, but is not

and I still get the Cannot read property 'map' of undefined error. When I delete the locale definition, the formatter works fine in English

full code on https://codepen.io/louislugas/pen/OJmmzwd

user_9387984 · Answer

First, you are missing some definition required for d3.timeFormatLocale(definition),

According to the documentation, the definition must include the following properties:

dateTime - the date and time (%c) format specifier (e.g., "%a %b %e %X %Y").
date - the date (%x) format specifier (e.g., "%m/%d/%Y").
time - the time (%X) format specifier (e.g., "%H:%M:%S").
periods - the A.M. and P.M. equivalents (e.g., ["AM", "PM"]).
days - the full names of the weekdays, starting with Sunday.
shortDays - the abbreviated names of the weekdays, starting with Sunday.
months - the full names of the months (starting with January).
shortMonths - the abbreviated names of the months (starting with January).

Secondly, it's better to use custom name to prevent it using predefined names/variables.

Let me know if the following code works for you:

You can simply modify the properties inside

var ID_Time = {
        "dateTime": "%d %B %Y",
        "date": "%d.%m.%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
        "shortDays": ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
        "months": ["Januari", "Februari", "Maret", "April", "Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],
        "shortMonths": ["Januari", "Februari", "Maret", "April", "Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"]
  };
  
var IDTime = d3.timeFormatDefaultLocale(ID_Time);
  
var customformatTime = d3.timeFormat("%d %B %Y");
  
console.log(customformatTime(maxDate));

d3 locale time format

1 Answers