d3-time-format

What is d3-time-format?

The d3-time-format package is a JavaScript library for parsing and formatting dates. It is part of the D3.js collection of tools for data visualization, but it can be used independently for dealing with date and time formatting. It provides a way to specify custom formats for dates and times, as well as parse strings into date objects based on these formats.

What are d3-time-format's main functionalities?

Formatting Dates

This feature allows you to format a JavaScript Date object into a string based on a specifier string. The specifier controls how various parts of the date are displayed.

"%Y-%m-%d".format(new Date())

Parsing Dates

This feature enables you to parse a string representing a date into a JavaScript Date object using a format specifier that matches the format of the string.

d3.timeParse("%Y-%m-%d")("2023-04-01")

Locale Support

This feature allows you to use locale-specific date and time formatting. You can define your own locale with custom time formatting symbols, or use predefined locales.

d3.timeFormatLocale(locale).format("%c")(new Date())

Other packages similar to d3-time-format

moment

Moment.js is a legacy package for date and time manipulation and formatting. It offers a wide range of functionalities similar to d3-time-format but is no longer recommended for new projects due to its size and the availability of more modern alternatives.

date-fns

date-fns provides a collection of simple, pure functions for manipulating JavaScript dates. It is modular and has a similar scope to d3-time-format, but it is designed to be more lightweight and with a functional programming approach.

luxon

Luxon is a powerful, modern library for working with dates and times. It offers a fluent API and comprehensive time zone support. Compared to d3-time-format, Luxon provides more extensive functionality around date arithmetic, parsing, and internationalization.

dayjs

Day.js is a minimalist library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. It is lightweight and can be a good alternative to d3-time-format for simple date formatting and parsing tasks.

README

d3-time-format

This module provides a JavaScript implementation of the venerable strptime and strftime functions from the C standard library, and can be used to parse or format dates in a variety of locale-specific representations. To format a date, create a format function from a format specifier (a string with the desired format directives, indicated by %); then pass a date to the format function, which returns a string. For example, to convert the current date to a human-readable string:

var f = format("%B %d, %Y");
f(new Date); // "June 30, 2015"

Format functions also support parsing as format.parse, so to convert a string back to a date:

var f = format("%B %d, %Y");
f.parse("June 30, 2015"); // Tue Jun 30 2015 00:00:00 GMT-0700 (PDT)

You can implement more elaborate conditional time formats, too. For example, here’s a multi-scale time format using time intervals:

var formatMillisecond = format(".%L"),
    formatSecond = format(":%S"),
    formatMinute = format("%I:%M"),
    formatHour = format("%I %p"),
    formatDay = format("%a %d"),
    formatWeek = format("%b %d"),
    formatMonth = format("%B"),
    formatYear = format("%Y");

function multiFormat(date) {
  return (second(date) < date ? formatMillisecond
      : minute(date) < date ? formatSecond
      : hour(date) < date ? formatMinute
      : day(date) < date ? formatHour
      : month(date) < date ? (week(date) < date ? formatDay : formatWeek)
      : year(date) < date ? formatMonth
      : formatYear)(date);
}

This format is used by D3’s time scale to generate human-readable ticks.

Installing

If you use NPM, npm install d3-time-format. Otherwise, download the latest release.

API Reference

# format(specifier)

An alias for locale.format on the default U.S. English locale. Use localeFormat for a different built-in locale or to define a new locale.

# utcFormat(specifier)

An alias for locale.utcFormat on the default U.S. English locale. Use localeFormat for a different built-in locale or to define a new locale.

# isoFormat

The full ISO 8601 UTC time format function. Where available, this method will use Date.toISOString to format and the Date constructor to parse strings. If you depend on strict validation of the input format according to ISO 8601, you should construct a UTC format:

var isoFormat = utcFormat("%Y-%m-%dT%H:%M:%S.%LZ");

# locale.format(specifier)

Returns a new format function for the given string specifier. The specifier string may contain the following directives:

• %a - abbreviated weekday name.*
• %A - full weekday name.*
• %b - abbreviated month name.*
• %B - full month name.*
• %c - the locale’s date and time, such as %a %b %e %H:%M:%S %Y.*
• %d - zero-padded day of the month as a decimal number [01,31].
• %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
• %H - hour (24-hour clock) as a decimal number [00,23].
• %I - hour (12-hour clock) as a decimal number [01,12].
• %j - day of the year as a decimal number [001,366].
• %m - month as a decimal number [01,12].
• %M - minute as a decimal number [00,59].
• %L - milliseconds as a decimal number [000, 999].
• %p - either AM or PM.*
• %S - second as a decimal number [00,61].
• %U - Sunday-based week of the year as a decimal number [00,53].
• %w - Sunday-based weekday as a decimal number [0,6].
• %W - Monday-based week of the year as a decimal number [00,53].
• %x - the locale’s date, such as %m/%d/%Y.*
• %X - the locale’s time, such as %H:%M:%S.*
• %y - year without century as a decimal number [00,99].
• %Y - year with century as a decimal number.
• %Z - time zone offset, such as -0700, -07:00, -07, or Z.
• %% - a literal percent sign (%).

Directives marked with an asterisk (*) may be affected by the locale definition. For %U, all days in a new year preceding the first Sunday are considered to be in week 0. For %W, all days in a new year preceding the first Monday are considered to be in week 0. Week numbers are computed using interval.count.

The % sign indicating a directive may be immediately followed by a padding modifier:

• 0 - zero-padding
• _ - space-padding
• - - disable padding

If no padding modifier is specified, the default is 0 for all directives except %e, which defaults to _. (In some implementations of strftime and strptime, a directive may include an optional field width or precision; this feature is not yet implemented.)

# locale.utcFormat(specifier)

Equivalent to locale.format, except all directives are interpreted as Coordinated Universal Time (UTC) rather than local time.

# format(date)

Formats the specified date, returning the corresponding string.

var formatMonth = format("%B"),
    formatDay = format("%A"),
    date = new Date(2014, 4, 1); // Thu May 01 2014 00:00:00 GMT-0700 (PDT)

formatMonth(date); // "May"
formatDay(date); // "Thursday"

# format.parse(string)

Parses the specified string, returning the corresponding date or null if the string could not be parsed according to this format’s specifier.

Parsing is strict: if the specified string does not exactly match the associated specifier, this method returns null. For example, if the associated specifier is %Y-%m-%dT%H:%M:%SZ, then the string "2011-07-01T19:15:28Z" will be parsed as expected, but "2011-07-01T19:15:28", "2011-07-01 19:15:28" and "2011-07-01" will return null. (Note that the literal Z here is different from the time zone offset directive %Z.) If a more flexible parser is desired, try multiple formats sequentially until one returns non-null.

The %d and %e directives are considered equivalent for parsing.

# format.toString()

Returns this format’s specifier.

# localeFormat(definition)

Returns a locale object for the specified definition with locale.format and locale.utcFormat methods. If definition is a string, it is the name of a built-in locale:

• "ca-ES" - Catalan (Spain)
• "de-CH" - German (Switzerland)
• "de-DE" - German (Germany)
• "en-CA" - English (Canada)
• "en-GB" - English (United Kingdom)
• "en-US" - English (United States)
• "es-ES" - Spanish (Spain)
• "fi-FI" - Finnish (Finland)
• "fr-CA" - French (Canada)
• "fr-FR" - French (France)
• "he-IL" - Hebrew (Israel)
• "hu-HU" - Hungarian (Hungary)
• "it-IT" - Italian (Italy)
• "ja-JP" - Japanese (Japan)
• "ko-KR" - Korean (South Korea)
• "mk-MK" - Macedonian (Macedonia)
• "nl-NL" - Dutch (Netherlands)
• "pl-PL" - Polish (Poland)
• "pt-BR" - Portuguese (Brazil)
• "ru-RU" - Russian (Russia)
• "sv-SE" - Swedish (Sweden)
• "zh-CN" - Chinese (China)

Otherwise, the locale 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).

Changes from D3 3.x:

• Exposed built-in locales.

• Removed format.multi.

• Renamed format.utc to utcFormat and format.iso to isoFormat.