Fix date formatting to use UTC

ui/src/album/AlbumDetails.js

@@ -25,14 +25,13 @@ import {
   ArtistLinkField,
   DurationField,
   formatRange,
-  FormatFullDate,
   SizeField,
   LoveButton,
   RatingField,
   useAlbumsPerPage,
 } from '../common'
 import config from '../config'
-import { intersperse } from '../utils'
+import { formatFullDate, intersperse } from '../utils'
 import AlbumExternalLinks from './AlbumExternalLinks'
 import AnchorMe from '../common/Linkify'
 
@@ -198,12 +197,12 @@ const Details = (props) => {
 
   const originalYearRange = formatRange(record, 'originalYear')
   const originalDate = record.originalDate
-    ? FormatFullDate(record.originalDate)
+    ? formatFullDate(record.originalDate)
     : originalYearRange
   const yearRange = formatRange(record, 'year')
-  const date = record.date ? FormatFullDate(record.date) : yearRange
+  const date = record.date ? formatFullDate(record.date) : yearRange
   const releaseDate = record.releaseDate
-    ? FormatFullDate(record.releaseDate)
+    ? formatFullDate(record.releaseDate)
     : date
 
   const showReleaseDate = date !== releaseDate && releaseDate.length > 3

ui/src/common/FormatFullDate.js

@@ -1,29 +0,0 @@
-export const FormatFullDate = (date) => {
-  const dashes = date.split('-').length - 1
-  let options = {
-    year: 'numeric',
-  }
-  switch (dashes) {
-    case 2:
-      options = {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }
-      return new Date(date).toLocaleDateString(undefined, options)
-    case 1:
-      options = {
-        year: 'numeric',
-        month: 'long',
-      }
-      return new Date(date).toLocaleDateString(undefined, options)
-    case 0:
-      if (date.length === 4) {
-        return new Date(date).toLocaleDateString(undefined, options)
-      } else {
-        return ''
-      }
-    default:
-      return ''
-  }
-}

ui/src/common/SongDatagrid.js

@@ -18,8 +18,9 @@ import AlbumIcon from '@material-ui/icons/Album'
 import clsx from 'clsx'
 import { useDrag } from 'react-dnd'
 import { playTracks } from '../actions'
-import { AlbumContextMenu, FormatFullDate } from '../common'
+import { AlbumContextMenu } from '../common'
 import { DraggableTypes } from '../consts'
+import { formatFullDate } from '../utils'
 
 const useStyles = makeStyles({
   subtitle: {
@@ -66,7 +67,7 @@ const ReleaseRow = forwardRef(
     let releaseTitle = []
     if (record.releaseDate) {
       releaseTitle.push(translate('resources.album.fields.released'))
-      releaseTitle.push(FormatFullDate(record.releaseDate))
+      releaseTitle.push(formatFullDate(record.releaseDate))
       if (record.catalogNum && isDesktop) {
         releaseTitle.push('· Cat #')
         releaseTitle.push(record.catalogNum)

ui/src/common/index.js

@@ -4,7 +4,6 @@ export * from './BatchPlayButton'
 export * from './BitrateField'
 export * from './ContextMenus'
 export * from './DateField'
-export * from './FormatFullDate'
 export * from './DocLink'
 export * from './DurationField'
 export * from './List'

ui/src/utils/formatters.js

@@ -24,3 +24,17 @@ export const formatDuration = (d) => {
 
   return `${days > 0 ? days + ':' : ''}${f}`
 }
+
+export const formatFullDate = (date) => {
+  const dashes = date.split('-').length - 1
+  let options = {
+    year: 'numeric',
+    timeZone: 'UTC',
+    ...(dashes > 0 && { month: 'short' }),
+    ...(dashes > 1 && { day: 'numeric' }),
+  }
+  if (dashes > 2 || (dashes === 0 && date.length > 4)) {
+    return ''
+  }
+  return new Date(date).toLocaleDateString(undefined, options)
+}

ui/src/utils/formatters.test.js

@@ -1,4 +1,4 @@
-import { formatBytes, formatDuration } from './formatters'
+import { formatBytes, formatDuration, formatFullDate } from './formatters'
 
 describe('formatBytes', () => {
   it('format bytes', () => {
@@ -31,3 +31,19 @@ describe('formatDuration', () => {
     expect(formatDuration(day + minute + 0.6)).toEqual('1:00:01:01')
   })
 })
+
+describe('formatFullDate', () => {
+  beforeAll(() => {
+    const toLocaleString = Date.prototype.toLocaleString
+    // eslint-disable-next-line no-extend-native
+    Date.prototype.toLocaleString = function (locale = 'en-US', ...args) {
+      return toLocaleString.call(this, locale, ...args)
+    }
+  })
+  it('format bytes', () => {
+    expect(formatFullDate('2011')).toEqual('2011')
+    expect(formatFullDate('2011-06')).toEqual('Jun 2011')
+    expect(formatFullDate('1985-01-01')).toEqual('Jan 1, 1985')
+    expect(formatFullDate('199704')).toEqual('')
+  })
+})