Mastering Date Functions in React Native with date-fns

Add Hours to a Given Time

addHoursToTime.ts

import { addHours } from 'date-fns';

export const addHoursToTime = (time: Date | string | number, hours: number): number => {
  const date = new Date(time);
  const newDate = addHours(date, hours);
  return newDate.getTime();
};

Used when users log actions that span a set number of hours. Adds X hours to a timestamp and returns the future time in milliseconds.

Format Billable Time from Entry

formatBillableTime.ts

import { TimeEntry } from '@/model/time-entry/types';
import { formatMilliesecondsToHoursMinutes } from './formatMilliesecondsToHoursMinutes';

export const formatBillableTime = ({
  billableTime,
  adminEndTime,
  adminNonBillableTime,
  adminStartTime,
}: TimeEntry) => {
  if (billableTime !== -1) {
    return formatMilliesecondsToHoursMinutes(billableTime);
  }
  if (adminEndTime && adminStartTime) {
    return formatMilliesecondsToHoursMinutes(
      adminNonBillableTime - (adminEndTime - adminStartTime)
    );
  }
  return '--';
};

Calculates total billable time from a time entry and formats it into hh:mm.

Convert Milliseconds to Hours and Minutes

formatMillisecondsToHoursMinutes.ts

import { formatDuration } from 'date-fns';

export const formatMilliesecondsToHoursMinutes = (time: number, stripZeros: boolean = false) => {
  if (!time || time < 0) return '0h 0m';

  const seconds = time / 1000;
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);

  const duration = formatDuration({ seconds: time / 1000 }, { format: ['hours', 'minutes'] });
  const result = \`\${hours}h \${minutes}m\`;

  if (stripZeros && hours === 0) {
    return result.replace('0h ', '');
  }

  return result;
};

Formats milliseconds to 'xh ym', useful for showing task durations or time spent.

Format Time to hh:mm A

formatMillisecondsToDayTime.ts

import { format } from 'date-fns';

export const formatMillisecondsToDayTime = (time: number) => {
  if (time === -1) return '--';
  return format(time, 'hh:mm a');
};

Converts a timestamp to a user-friendly time string like '02:30 PM'.

Get Duration Between Two Times on Same Day

getFormattedDifference.ts

import { differenceInMinutes } from 'date-fns';

export const getFormattedDifferenceBetweenTwoTimesOnSameDay = (
  startTime: number,
  endTime: number
) => {
  const minutesDifference = Math.abs(differenceInMinutes(new Date(startTime), new Date(endTime)));

  const hours = Math.floor(minutesDifference / 60);
  const minutes = Math.floor(minutesDifference % 60);

  return \`\${hours}h \${minutes}m\`;
};

Calculates the time difference between two timestamps in 'xh ym' format.

Get Start of Day in Milliseconds

getStartOfDay.ts

import { startOfDay } from 'date-fns';

export const getMillisecondsForStartOfDay = (date?: Date | string | number) => {
  if (!date) return startOfDay(new Date()).getTime();
  return startOfDay(new Date(date)).getTime();
};

Returns the timestamp for 12:00 AM of a given day.

Get End of Day in Milliseconds

getEndOfDay.ts

import { endOfDay } from 'date-fns';

export const getMillisecondsForEndOfDay = (date?: Date | string | number) => {
  if (!date) return endOfDay(new Date()).getTime();
  return endOfDay(new Date(date)).getTime();
};

Returns the timestamp for 11:59:59 PM of a given day.

Get ISO Week of the Year

getWeekOfYear.ts

import { getISOWeek } from 'date-fns';

export const getWeekOfYear = (): number => {
  return getISOWeek(new Date());
};

Returns the ISO week number of the current date. Useful for grouping or reporting.

Parse Date into Localized Time String

parseDateIntoLocalizedTime.ts

import { format } from 'date-fns';

export const parseDateIntoLocalizedTime = (date: Date | number | string): string => {
  return format(date, 'p');
};

Turns a date into a readable local time like '3:00 PM'.

Parse Date into MM/DD/YYYY String

parseDateIntoString.ts

import { format } from 'date-fns';

export const parseDateIntoString = (
  date: number | string | null | undefined | Date = new Date()
) => {
  if (!date) return 'N/A';
  return format(new Date(date), 'MM/dd/yyyy');
};

Formats a date as MM/DD/YYYY for display in cards or reports.

Convert MM/DD/YYYY to Date Object

parseStringToDate.ts

export const parseStringToDate = (dateString: string): Date => {
  const [month, day, year] = dateString.split('/').map(Number);
  const date = new Date(year, month - 1, day);

  if (isNaN(date.getTime())) {
    throw new Error('Invalid date string');
  }

  return date;
};

Parses a string like '12/31/2024' into a valid Date object.

Expo Explained

LLMs

Fundamentals