Best practices for correctly parsing a date in UTC format using the date-fns library

Question

Best practices for correctly parsing a date in UTC format using the date-fns library

My log file contains timestamps in a non-ISO format:

2020-12-03 08:30:00
2020-12-03 08:40:00
...

The timestamps are in UTC, as per the log provider's documentation.

I am attempting to parse them using date-fns:

const toParse = "2020-12-03 08:40:00"
parse(toParse, 'yyyy-MM-dd HH:mm:ss', new Date()).toISOString()

Due to my computer's locale being UTC+1, I encounter this issue:

> "2020-12-03T07:40:00Z"

Instead, I expect:

> "2020-12-03T08:40:00Z".

To work around this, I currently append '+00' to parse as UTC:

const toParse = "2020-12-03 08:40:00"
parse(toParse + '+00', 'yyyy-MM-dd HH:mm:ss' + 'X', new Date()).toISOString()

This results in:

> "2020-12-03T08:40:00Z".

Is there a correct way to achieve this with date-fns? Seeking an equivalent of moment's moment.utc()

javascript typescript date timezone date-fns

Answer 1

Answer №1

When it comes to handling timestamps with different offsets or timezones, you may not be concerned with what is considered "proper". Instead, you can utilize the zonedTimeToUtc function from date-fns library. This function allows you to manipulate a timestamp and adjust its offset or timezone as needed, such as converting it to UTC.

// Initial Setup
var {parse} = require('date-fns');
var {zonedTimeToUtc} = require('date-fns-tz');

// Parse a timestamp in ISO 8601 format recognized by date-fns
let location = 'UTC';
let timestamp1 = '2020-12-03 08:30:00';
let utcTimestamp = zonedTimeToUtc(timestamp1, location);

// Display the converted UTC ISO 8601 timestamp
console.log(utcTimestamp.toISOString()); // "2020-12-03T08:30:00.000Z"

// Parse a timestamp in non-standard format yyyyMMdd
let timestamp2 = '20210119';
let formatInput = 'yyyyMMdd';
let parsedDate = zonedTimeToUtc(parse(timestamp2, formatInput, new Date()), location);
console.log(parsedDate.toISOString()); // "2021-01-19T00:00:00.000Z"

You can experiment with this functionality using the code snippet on npm.runkit.com/date-fns.

Answer 2

When it comes to handling timestamps with different offsets or timezones, you may not be concerned with what is considered "proper". Instead, you can utilize the zonedTimeToUtc function from date-fns library. This function allows you to manipulate a timestamp and adjust its offset or timezone as needed, such as converting it to UTC.

// Initial Setup
var {parse} = require('date-fns');
var {zonedTimeToUtc} = require('date-fns-tz');

// Parse a timestamp in ISO 8601 format recognized by date-fns
let location = 'UTC';
let timestamp1 = '2020-12-03 08:30:00';
let utcTimestamp = zonedTimeToUtc(timestamp1, location);

// Display the converted UTC ISO 8601 timestamp
console.log(utcTimestamp.toISOString()); // "2020-12-03T08:30:00.000Z"

// Parse a timestamp in non-standard format yyyyMMdd
let timestamp2 = '20210119';
let formatInput = 'yyyyMMdd';
let parsedDate = zonedTimeToUtc(parse(timestamp2, formatInput, new Date()), location);
console.log(parsedDate.toISOString()); // "2021-01-19T00:00:00.000Z"

You can experiment with this functionality using the code snippet on npm.runkit.com/date-fns.

Answer 3

Answer №2

Maybe you're searching for the parseJSON function, which can handle various date formats (although it doesn't allow you to specify the input format).

This function converts a full ISO date string in UTC time, commonly used when transmitting dates in JSON, into a JavaScript Date object.

import { parseJSON } from 'date-fns';
const utcDate = parseJSON('2020-12-03 08:40:00');

// This would give you Thu Dec 03 2020 19:40:00 GMT+1100 (Australian Eastern Daylight Time)

Answer 4

Maybe you're searching for the parseJSON function, which can handle various date formats (although it doesn't allow you to specify the input format).

This function converts a full ISO date string in UTC time, commonly used when transmitting dates in JSON, into a JavaScript Date object.

import { parseJSON } from 'date-fns';
const utcDate = parseJSON('2020-12-03 08:40:00');

// This would give you Thu Dec 03 2020 19:40:00 GMT+1100 (Australian Eastern Daylight Time)

Answer 5

Answer №3

An illustration of utilizing parse and zonedTimeToUtc functions

 it('should convert Polish date to UTC', async () => {
    expect.assertions(1)
    const dateWithoutTime = '29 gru 2003'

    const parsed = parse(dateWithoutTime, 'd LLL yyyy', new Date(), {
      locale: pl,
    })

    const dateUTC = zonedTimeToUtc(parsed, 'UTC')

    expect(dateUTC.toISOString()).toStrictEqual('2003-12-29T00:00:00.000Z')
  })

Answer 6

An illustration of utilizing parse and zonedTimeToUtc functions

 it('should convert Polish date to UTC', async () => {
    expect.assertions(1)
    const dateWithoutTime = '29 gru 2003'

    const parsed = parse(dateWithoutTime, 'd LLL yyyy', new Date(), {
      locale: pl,
    })

    const dateUTC = zonedTimeToUtc(parsed, 'UTC')

    expect(dateUTC.toISOString()).toStrictEqual('2003-12-29T00:00:00.000Z')
  })

Best practices for correctly parsing a date in UTC format using the date-fns library

Answer №1

Answer №2

Answer №3

Similar questions

Manipulating array objects by replacing values in Typescript

ApolloError: Undefined fragment detected and unable to be used

Is there a radio button that can dynamically update and modify the current view?

Utilize the key as the value for options within an object iteration in Vue.js

Maintain the tab order for elements even when they are hidden

Here is a way to prevent a null input value from being accepted in a JavaScript function

Steps to import an external script into a NextJS application and access it from the main bundle

Detecting the failure of chrome.extension.sendRequest

Angular 6: Dealing with Type Errors in the HttpClient Request

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

Sticky positioning with varying column widths

A TypeScript object with user-defined keys

Having difficulty accessing the ::after element on Firefox when attempting to click

Error encountered while using AngularJS and Node.js with the 'phantom' node module. The application is throwing an injection error as AngularJS attempts to load a directive with a suffix

Tips for displaying an edit action icon when hovering over specific text

After entering text manually, the textarea.append() function ceases to function properly

Issue encountered in transmitting information from JSP to servlet

Problem with Jquery Sticky Navigation

What causes the discrepancy between the values returned by the jQuery getter css() method and JavaScript when accessing the style variable

Determine the number of network requests being made on a webpage