Notes

Appearance

Date Handling ​

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

String Parsing ​

Usually start with a string as a source. Convert that to a Date object in Javascript

https://stackoverflow.com/questions/5619202/converting-a-string-to-a-date-in-javascript

Within the native Date library documentation, there are many warnings:

Note: Parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

Some browsers assume UTC, others assume local time. This is where libraries can help.

Otherwise

js
Date.parse('01 Jan 1970 00:00:00 GMT');
Date.parse('01 Jan 1970 00:00:00 GMT');

Formatting ​

Options exist natively in newer versions of Javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

js
      const start = new Date(Date.parse(value))
      const options = { month: 'long', year: 'numeric' }
      return start.toLocaleDateString('en-US', options)
      const start = new Date(Date.parse(value))
      const options = { month: 'long', year: 'numeric' }
      return start.toLocaleDateString('en-US', options)

https://stackoverflow.com/questions/45724975/date-tolocaledatestring-is-not-a-function

To format a date for a filename, the following pattern works:

js
function toJSONLocal(date) {
  var local = new Date(date);
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  return local.toJSON().slice(0, 10);
}

let date = new Date();
let name = toJSONLocal(date);
console.log(name);
function toJSONLocal(date) {
  var local = new Date(date);
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  return local.toJSON().slice(0, 10);
}

let date = new Date();
let name = toJSONLocal(date);
console.log(name);

adapted via:
https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date

Adjustments ​

https://stackoverflow.com/questions/674721/how-do-i-subtract-minutes-from-a-date-in-javascript

js
var endDate = somedate;
var startdate = new Date(endDate);
var durationInMinutes = 20;
startdate.setMinutes(endDate.getMinutes() - durationInMinutes);
var endDate = somedate;
var startdate = new Date(endDate);
var durationInMinutes = 20;
startdate.setMinutes(endDate.getMinutes() - durationInMinutes);
js
let stale = new Date();
stale.setMinutes(stale.getMinutes() - 5);
let stale = new Date();
stale.setMinutes(stale.getMinutes() - 5);

Adding Days ​

js
var date = new Date();
date.setDate(date.getDate() + days);
return date;
var date = new Date();
date.setDate(date.getDate() + days);
return date;

https://stackoverflow.com/questions/563406/add-days-to-javascript-date

Days between dates ​

js
const _MS_PER_DAY = 1000 * 60 * 60 * 24;

// a and b are javascript Date objects
function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

// test it
const a = new Date("2017-01-01"),
    b = new Date("2017-07-25"),
    difference = dateDiffInDays(a, b);
const _MS_PER_DAY = 1000 * 60 * 60 * 24;

// a and b are javascript Date objects
function dateDiffInDays(a, b) {
  // Discard the time and time-zone information.
  const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

// test it
const a = new Date("2017-01-01"),
    b = new Date("2017-07-25"),
    difference = dateDiffInDays(a, b);

https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript

Libraries ​

Both Day.js and date-fns stand out as good alternatives that should minimal impact to bundle size.

Day JS ​

API is similar to Moment JS. Very popular on Github. Weighs only 2KB!

https://github.com/iamkun/dayjs
iamkun/dayjs: ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API

Date-fns ​

Compatible with treeshaking, but with Day JS only at 2kb, maybe it's not important to tree shake?

https://date-fns.org/
date-fns - modern JavaScript date utility library

https://github.com/you-dont-need/You-Dont-Need-Momentjs
you-dont-need/You-Dont-Need-Momentjs: List of functions which you can use to replace moment.js + ESLint Plugin

to use in vue

yarn add date-fns
yarn add date-fns
js
import { format, parseISO } from "date-fns";

export default {
  data() {
    return {
      format,
      parseISO
    };
  },
import { format, parseISO } from "date-fns";

export default {
  data() {
    return {
      format,
      parseISO
    };
  },

Spacetime ​

Date calculator. ~40kb

https://github.com/spencermountain/spacetime

Luxon ​

Wraps Intl library to modernize Moment JS:

https://moment.github.io/luxon/

Moment JS ​

Moment JS is a popular solution (as of 2020) for date handling in Javascript.

However, for what it does, Moment.js is pretty big in size. A lot of that comes from locales.

It may be possible to optimize what is included with a bundler, but it is still likely to be large.

https://www.google.com/search?client=ubuntu&channel=fs&q=will+webpack+ignore+parts+of+momentjs+not+used%3F&ie=utf-8&oe=utf-8
will webpack ignore parts of momentjs not used? - Google Search
https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
jmblog/how-to-optimize-momentjs-with-webpack: Explaining how to optimize the large bundle size of moment.js with webpack

https://www.google.com/search?client=ubuntu&channel=fs&q=size+of+moment+js&ie=utf-8&oe=utf-8
size of moment js - Google Search

https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173
Angular CLI and Moment.js: A recipe for disaster … and how to fix it.
https://www.google.com/search?client=ubuntu&channel=fs&q=vue+date+filter&ie=utf-8&oe=utf-8
vue date filter - Google Search
https://forum.vuejs.org/t/how-to-format-date-for-display/3586
How to format date for display - General Discussion - Vue Forum
https://www.npmjs.com/package/vue-moment
vue-moment - npm
https://github.com/brockpetrie/vue-moment/blob/master/vue-moment.js
vue-moment/vue-moment.js at master · brockpetrie/vue-moment

YAML ​

https://duckduckgo.com/?t=canonical&q=YAML+date-time&ia=web
YAML date-time at DuckDuckGo
https://stackoverflow.com/questions/2656196/ruby-how-do-i-define-a-datetime-field-in-yaml
Ruby: How do I define a datetime field in YAML? - Stack Overflow
https://yaml.org/type/timestamp.html
Timestamp Language-Independent Type for YAML™ Version 1.1