npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ui-date

v2.0.0

Published

Lightweight, zero-dependency, locale-aware date formatting and relative time utility for modern UIs.

Readme

📅 ui-date

A lightweight, zero-dependency TypeScript library for formatting, inspecting, and displaying dates with both Chainable (Class) and Standalone Functional APIs.

ui-date is built on JavaScript's native Date and Intl APIs, so there are no runtime dependencies, no extra locale files, and no plugins to install.

Whether you need to display a date, format a time, check if a day is today, or show text like "2 hours ago", ui-date provides a simple and consistent API for modern JavaScript applications.


⚡ Package Size

  • 📦 Unpacked Size: 1.64 kB
  • 🗜️ Minified + Gzipped: < 1 kB
  • 🚫 Runtime Dependencies: 0
  • 🌲 Tree-shakeable ES Module
  • 📘 Full TypeScript Support

✨ Features

✨ Features

  • 🚫 Zero Dependencies — Built entirely on native JavaScript APIs.
  • Lightweight & Fast — Tiny bundle size with minimal runtime overhead.
  • Full Internationalization (i18n): Support for all standard BCP 47 locale tags (es-ES, de-DE, ja-JP, etc.).
  • Graceful Locale Fallback: Bad or unsupported locale strings now safely default to system locale without crashing.
  • Native Relative Time Formatting: Utilizes Intl.RelativeTimeFormat for automatically localized relative dates.
  • Fully Typed — Complete TypeScript definitions included.
  • Chainable API — Clean, intuitive, object-oriented methods.
  • Relative Time — Generate strings like "5 minutes ago" or "in 2 days".
  • Readable Date Formatting — Format dates into human-friendly strings.
  • Date Overview API — Retrieve all commonly used date properties in a single call.
  • Date Status Helpers — Check if a date is today, tomorrow, yesterday, a weekend, or a leap year.
  • Framework Agnostic — Works with any JavaScript or TypeScript project.

📦 Installation

npm

npm install ui-date

pnpm

pnpm add ui-date

yarn

yarn add ui-date

bun

bun add ui-date

Quick Start

ui-date provides two different APIs.

Choose the style you prefer.

1. Chainable Class API

Ideal when you're working with a single date and want to call multiple methods.

import uiDate from "ui-date";

const date = uiDate("2026-08-15");

date.getDayName();
// Saturday

date.getMonthName();
// August

date.getDate();
// 08/15/2026

date.getTime();
// 06:30 PM

date.getRelativeTime();
// in 2 weeks

2. Standalone Functional API

Ideal when you only need one utility function.

import { getDayName, getMonthName, getDate, getTime } from "ui-date";

getDayName({
  input: "2026-08-15",
});
// Saturday

getMonthName({
  input: "2026-08-15",
});
// August

getDate({
  input: "2026-08-15",
});
// 08/15/2026

getTime({
  input: "2026-08-15",
});
// 06:30 PM

Which API Should I Use?

Both APIs provide the same features.

Choose whichever best fits your coding style.

| Chainable API | Functional API | | --------------------------------- | ----------------------------------- | | Works on a single date instance | Independent utility functions | | Easy to chain multiple operations | Great when you only need one method | | Cleaner for repeated operations | Better for utility-based code | | uiDate(date).getDayName() | getDayName({ input: date }) |

Both APIs are fully supported and receive the same updates.


Internationalization

ui-date uses the browser's native Intl API, so it automatically supports hundreds of locales without downloading additional locale files.

uiDate("2026-08-15", "en-US").getDayName();
// Saturday

uiDate("2026-08-15", "fr-FR").getDayName();
// samedi

uiDate("2026-08-15", "de-DE").getDayName();
// Samstag

uiDate("2026-08-15", "ja-JP").getDayName();
// 土曜日

The same applies to the standalone functions.

getDayName({
  input: "2026-08-15",
  locale: "fr-FR",
});

// samedi

If an invalid locale is provided, ui-date safely falls back to the system's default locale.


Works Everywhere

ui-date works anywhere JavaScript runs.

  • JavaScript
  • TypeScript
  • React
  • React Native
  • Next.js
  • Vue
  • Nuxt
  • Svelte
  • SvelteKit
  • Angular
  • Astro
  • Remix
  • Node.js
  • Bun
  • Deno
  • Electron

Why Not Just Use Date?

JavaScript's native Date object is powerful, but many common UI tasks require verbose code.

For example, getting a readable day name:

new Date().toLocaleDateString("en-US", {
  weekday: "long",
});

With ui-date:

uiDate().getDayName();

Showing relative time:

new Intl.RelativeTimeFormat("en-US").format(-2, "day");

With ui-date:

uiDate(Date.now() - 172800000).getRelativeTime();

The goal of ui-date isn't to replace JavaScript's Date API.

It provides a cleaner, easier interface for the date formatting and display tasks developers write every day.


📖 API Overview

The library exposes two APIs.

Chainable API

import uiDate from "ui-date";

const date = uiDate(new Date());

date.getDayName();

date.getMonthName();

date.getYear();

date.getMonthCount();

date.getDay();

date.getTime();

date.getDate();

date.isLeapYear();

date.isWeekend();

date.isToday();

date.isTomorrow();

date.isYesterday();

date.getRelativeTime();

date.getRelativeTimeParts();

date.formatFullDate();

date.getOverview();

Standalone API

import {
  getDayName,
  getMonthName,
  getYear,
  getMonthCount,
  getDay,
  getTime,
  getDate,
  isLeapYear,
  isWeekend,
  isToday,
  isTomorrow,
  isYesterday,
  getRelativeTime,
  getRelativeTimeParts,
  formatFullDate,
} from "ui-date";

The next section explains every method in detail with examples for both APIs.

API GUIDE

Every feature in ui-date is available through both APIs.

  • Chainable API – Best when working with one date and calling multiple methods.
  • Standalone API – Best when you only need a single utility function.

Both APIs produce the same output.


getDayName()

Returns the localized day name.

Chainable API

Signature

getDayName(short?: boolean): string

Parameters

| Parameter | Type | Default | Description | | --------- | ------- | ------- | --------------------------------------------- | | short | boolean | false | Returns the abbreviated day name when true. |

Example

const date = uiDate("2026-08-15");

date.getDayName();
// Saturday

date.getDayName(true);
// Sat

Standalone API

Signature

getDayName({
    input?,
    short?,
    locale?
}): string

Example

import { getDayName } from "ui-date";

getDayName({
  input: "2026-08-15",
});
// Saturday

getDayName({
  input: "2026-08-15",
  short: true,
});
// Sat

Returns

string;

Common Use Cases

  • Calendar headers
  • Event cards
  • Booking systems
  • Meeting schedules
  • Attendance dashboards

getMonthName()

Returns the localized month name.

Chainable API

Signature

getMonthName(short?: boolean): string

Example

const date = uiDate("2026-08-15");

date.getMonthName();
// August

date.getMonthName(true);
// Aug

Standalone API

Signature

getMonthName({
    input?,
    short?,
    locale?
}): string

Example

import { getMonthName } from "ui-date";

getMonthName({
  input: "2026-08-15",
});
// August

getMonthName({
  input: "2026-08-15",
  short: true,
});
// Aug

Returns

string;

Common Use Cases

  • Blog posts
  • Reports
  • Invoices
  • Event pages
  • Timeline components

getYear()

Returns the four-digit year.

Chainable API

Signature

getYear(): number

Example

uiDate("2026-08-15").getYear();

// 2026

Standalone API

Signature

getYear(input?): number

Example

import { getYear } from "ui-date";

getYear("2026-08-15");

// 2026

Returns

number;

Common Use Cases

  • Copyright
  • Reports
  • Filtering
  • Archives

getMonthCount()

Returns the month number (1–12).

Chainable API

Signature

getMonthCount(): number

Example

uiDate("2026-08-15").getMonthCount();

// 8

Standalone API

Signature

getMonthCount(input?): number

Example

import { getMonthCount } from "ui-date";

getMonthCount("2026-08-15");

// 8

Returns

number;

Common Use Cases

  • Database values
  • Sorting
  • Comparisons
  • Analytics

getDay()

Returns the day of the month.

Chainable API

Signature

getDay(): number

Example

uiDate("2026-08-15").getDay();

// 15

Standalone API

Signature

getDay(input?): number

Example

import { getDay } from "ui-date";

getDay("2026-08-15");

// 15

Returns

number;

Common Use Cases

  • Calendars
  • Event scheduling
  • Timelines
  • Date comparisons

getDate()

Returns a formatted date string.

Chainable API

Signature

getDate(isoFormat?: boolean): string

Parameters

| Parameter | Type | Default | Description | | --------- | ------- | ------- | ------------------------------------------------ | | isoFormat | boolean | false | Returns an ISO date (YYYY-MM-DD) when enabled. |

Example

const date = uiDate("2026-08-15");

date.getDate();
// 08/15/2026

date.getDate(true);
// 2026-08-15

Standalone API

Signature

getDate({
    input?,
    locale?,
    isoFormat?
}): string

Example

import { getDate } from "ui-date";

getDate({
  input: "2026-08-15",
});
// 08/15/2026

getDate({
  input: "2026-08-15",
  isoFormat: true,
});
// 2026-08-15

Returns

string;

Common Use Cases

Regular format

  • UI display
  • Profile pages
  • Event cards
  • Tables

ISO format

  • REST APIs
  • Databases
  • JSON
  • Sorting dates

getTime()

Returns a localized time string.

Chainable API

Signature

getTime(use24HourFormat?: boolean): string

Parameters

| Parameter | Type | Default | Description | | --------------- | ------- | ------- | ---------------------------------- | | use24HourFormat | boolean | false | Uses a 24-hour clock when enabled. |

Example

const date = uiDate("2026-08-15T18:30:00");

date.getTime();
// 06:30 PM

date.getTime(true);
// 18:30

Standalone API

Signature

getTime({
    input?,
    locale?,
    use24HourFormat?
}): string

Example

import { getTime } from "ui-date";

getTime({
  input: "2026-08-15T18:30:00",
});
// 06:30 PM

getTime({
  input: "2026-08-15T18:30:00",
  use24HourFormat: true,
});
// 18:30

Returns

string;

Common Use Cases

  • Chat applications
  • Notifications
  • Calendar events
  • Booking systems
  • Timetables

formatFullDate()

Returns a complete, human-readable date.

Chainable API

Signature

formatFullDate(short?: boolean): string

Parameters

| Parameter | Type | Default | Description | | --------- | ------- | ------- | ------------------------------------- | | short | boolean | false | Uses abbreviated day and month names. |

Example

const date = uiDate("2026-08-15");

date.formatFullDate();
// Saturday 15, August, 2026

date.formatFullDate(true);
// Sat 15, Aug, 2026

Standalone API

Signature

formatFullDate(
    input?,
    locale?,
    short?
): string

Example

import { formatFullDate } from "ui-date";

formatFullDate("2026-08-15");
// Saturday 15, August, 2026

formatFullDate("2026-08-15", "default", true);
// Sat 15, Aug, 2026

Returns

string;

Common Use Cases

  • Event pages
  • Certificates
  • Invoices
  • Reports
  • Dashboards
  • Printable documents

Date Status Helpers

These methods help you determine the status of a date without writing manual comparison logic.

They are useful for calendars, reminders, notifications, event scheduling, attendance systems, and timeline applications.


isLeapYear()

Checks whether the year is a leap year.

Chainable API

Signature

isLeapYear(): boolean

Example

uiDate("2024-02-29").isLeapYear();

// true

uiDate("2025-01-01").isLeapYear();

// false

Standalone API

Signature

isLeapYear(input?): boolean

Example

import { isLeapYear } from "ui-date";

isLeapYear("2024-02-29");

// true

isLeapYear("2025-01-01");

// false

Returns

boolean;

Common Use Cases

  • Calendar applications
  • Financial systems
  • Date validation
  • Year calculations

isWeekend()

Checks whether the date falls on Saturday or Sunday.

Chainable API

Signature

isWeekend(): boolean

Example

uiDate("2026-08-15").isWeekend();

// true

uiDate("2026-08-17").isWeekend();

// false

Standalone API

Signature

isWeekend(input?): boolean

Example

import { isWeekend } from "ui-date";

isWeekend("2026-08-15");

// true

isWeekend("2026-08-17");

// false

Returns

boolean;

Common Use Cases

  • Leave management
  • Office scheduling
  • Booking systems
  • Attendance software
  • School management

isToday()

Checks whether the given date is today.

Chainable API

Signature

isToday(): boolean

Example

uiDate(new Date()).isToday();

// true

uiDate("2026-08-15").isToday();

// false

Standalone API

Signature

isToday(input): boolean

Example

import { isToday } from "ui-date";

isToday(new Date());

// true

Returns

boolean;

Common Use Cases

  • Highlight today's events
  • Dashboard widgets
  • Calendar applications
  • Task management
  • Daily reminders

isTomorrow()

Checks whether the date is tomorrow.

Chainable API

Signature

isTomorrow(): boolean

Example

const tomorrow = new Date();

tomorrow.setDate(tomorrow.getDate() + 1);

uiDate(tomorrow).isTomorrow();

// true

Standalone API

Signature

isTomorrow(input): boolean

Example

import { isTomorrow } from "ui-date";

const tomorrow = new Date();

tomorrow.setDate(tomorrow.getDate() + 1);

isTomorrow(tomorrow);

// true

Returns

boolean;

Common Use Cases

  • Reminder applications
  • Upcoming events
  • Notifications
  • Appointment scheduling

isYesterday()

Checks whether the date is yesterday.

Chainable API

Signature

isYesterday(): boolean

Example

const yesterday = new Date();

yesterday.setDate(yesterday.getDate() - 1);

uiDate(yesterday).isYesterday();

// true

Standalone API

Signature

isYesterday(input): boolean

Example

import { isYesterday } from "ui-date";

const yesterday = new Date();

yesterday.setDate(yesterday.getDate() - 1);

isYesterday(yesterday);

// true

Returns

boolean;

Common Use Cases

  • Chat applications
  • Activity feeds
  • Notifications
  • Timeline components
  • History pages

getOverview()

Returns multiple commonly used date values in a single object.

Instead of calling many methods individually, getOverview() computes everything at once and returns a structured object.

Chainable API

Signature

getOverview(): DateOverview

Example

const overview = uiDate("2026-08-15").getOverview();

console.log(overview);

Returns

{
  dayName: "Saturday",
  shortDayName: "Sat",
  monthName: "August",
  shortMonthName: "Aug",
  monthCount: 8,
  day: 15,
  year: 2026,
  isoDate: "2026-08-15",
  usaDate: "08/15/2026",
  time12: "06:30 PM",
  time24: "18:30",
  isLeapYear: false,
  isWeekend: true,
  relativeTime: "in 2 weeks",
  relativeTimeParts: {
    value: 2,
    unit: "week",
    direction: "future",
    formattedValue: "2",
    formattedUnit: "weeks",
    formattedText: "in 2 weeks"
  },
  isToday: false,
  isTomorrow: false,
  isYesterday: false,
  formatFullDate: "Saturday 15, August, 2026"
}

Why use getOverview()?

Without getOverview() you might write:

const date = uiDate("2026-08-15");

const dayName = date.getDayName();

const month = date.getMonthName();

const year = date.getYear();

const time = date.getTime();

const weekend = date.isWeekend();

const relative = date.getRelativeTime();

const formatted = date.formatFullDate();

Using getOverview():

const overview = uiDate("2026-08-15").getOverview();

overview.dayName;

overview.monthName;

overview.time12;

overview.relativeTime;

overview.isWeekend;

Much cleaner and easier to maintain.


Returns

interface DateOverview {
  dayName: string;
  shortDayName: string;
  monthName: string;
  shortMonthName: string;
  monthCount: number;
  day: number;
  year: number;
  isoDate: string;
  usaDate: string;
  time12: string;
  time24: string;
  isLeapYear: boolean;
  isWeekend: boolean;
  relativeTime: string;
  relativeTimeParts: RelativeTimeParts;
  isToday: boolean;
  isTomorrow: boolean;
  isYesterday: boolean;
  formatFullDate: string;
}

Common Use Cases

  • Dashboard cards
  • Calendar screens
  • Event detail pages
  • User profile pages
  • Date summary widgets
  • Analytics dashboards

Relative Time APIs

ui-date provides two APIs for working with relative time.

  • getRelativeTime() — Returns a ready-to-display string.
  • getRelativeTimeParts() — Returns structured data for building custom interfaces.

Although both methods calculate relative time, they are designed for different use cases.


getRelativeTime()

Returns a human-readable relative time string.

Examples include:

  • just now
  • 5 minutes ago
  • yesterday
  • in 2 days
  • next month

This is the recommended API when you simply want to display relative time in your application.


Chainable API

Signature

getRelativeTime(compareWith?: Date | string | number): string

If no comparison date is provided, the current date and time is used.

Example

uiDate(Date.now() - 60000).getRelativeTime();

// "1 minute ago"

uiDate(Date.now() + 7200000).getRelativeTime();

// "in 2 hours"

Comparing Two Dates

You can also compare one date with another.

const eventDate = new Date("2026-12-25");

const bookingDate = new Date("2026-12-20");

uiDate(eventDate).getRelativeTime(bookingDate);

// "in 5 days"

Standalone API

Signature

getRelativeTime({
    date1,
    date2?,
    locale?
}): string

Example

import { getRelativeTime } from "ui-date";

getRelativeTime({
    date1: Date.now() - 3600000,
    locale: "en-US"
});

// "1 hour ago"

Comparing Two Dates

getRelativeTime({
    date1: "2026-12-25",
    date2: "2026-12-20"
});

// "in 5 days"

Returns

string

Common Use Cases

  • Social media posts
  • Chat messages
  • Notifications
  • Comments
  • Activity feeds
  • Git commits
  • Email timestamps

getRelativeTimeParts()

Returns structured relative time information instead of a single string.

Rather than returning:

2 hours ago

it returns an object that contains each piece separately.

{
    value: 2,
    unit: "hour",
    direction: "past",
    formattedValue: "2",
    formattedUnit: "hours",
    formattedText: "2 hours ago"
}

This makes it much easier to build custom user interfaces without manually splitting strings. This method always returns

{
   value: 2,
   unit: "hour",
   direction: "past",
   formattedValue: "2",
   formattedUnit: "hours",
   formattedText: "2 hours ago"
}

there is no fallback for formattedText. It's guaranteed that it will return as expected for RTL language too.`


Chainable API

Signature

getRelativeTimeParts(compareWith?: Date | string | number): RelativeTimeParts

Example

const parts = uiDate(
    Date.now() - 7200000
).getRelativeTimeParts();

console.log(parts);

Returns

{
    value: 2,
    unit: "hour",
    direction: "past",
    formattedValue: "2",
    formattedUnit: "hours",
    formattedText: "2 hours ago"
}

Guaranteed Unit Extraction (Zero Fallback Risk)

Unlike simple regex splitting, getRelativeTimeParts() uses native Intl.RelativeTimeFormat.prototype.formatToParts() combined with an intelligent token-isolation algorithm.

  • Non-Western Grammar Support: Works seamlessly across languages with non-standard word orders (e.g., French, Korean, Japanese, Arabic).
  • Guaranteed formattedUnit: formattedUnit is guaranteed to return a localized string unit (e.g., "hours", "분"), stripping away directional words like "ago", "in", or "前".
  • RTL Ready: Full support for Right-to-Left (RTL) languages without breaking layout components.

Standalone API

Signature

getRelativeTimeParts({
    date1,
    date2?,
    locale?
}): RelativeTimeParts

Example

import { getRelativeTimeParts } from "ui-date";

const result = getRelativeTimeParts({
    date1: Date.now() - 7200000
});

console.log(result);

Finding the Difference Between Two Events

getRelativeTimeParts() is not limited to comparing against the current time.

You can compare any two dates.

For example:

  • Event start and end
  • Booking and check-in
  • Order date and delivery date
  • Project start and deadline
  • Product launch and release

Example

const launchDate = new Date("2026-09-01");

const deadline = new Date("2026-09-10");

const difference = uiDate(deadline)
    .getRelativeTimeParts(launchDate);

console.log(difference);

Returns

{
    value: 9,
    unit: "day",
    direction: "future",
    formattedValue: "9",
    formattedUnit: "days",
    formattedText: "in 9 days"
}

The standalone API works the same way.

const difference = getRelativeTimeParts({
    date1: "2026-09-10",
    date2: "2026-09-01"
});

Building Custom UI

Suppose you want to style the number differently from the unit.

Instead of:

2 hours ago

you want:

[2] [hours]

Using getRelativeTimeParts():

const {
    formattedValue,
    formattedUnit
} = uiDate(post.createdAt)
    .getRelativeTimeParts();

return (
    <>
        <span>{formattedValue}</span>
        <span>{formattedUnit}</span>
    </>
);

You can also use:

  • Different colors
  • Different font sizes
  • Animations
  • Progress indicators
  • Badges
  • Timeline components

without parsing a formatted string.


RelativeTimeParts

interface RelativeTimeParts {
    value: number;
    unit: Intl.RelativeTimeFormatUnit;
    direction: "past" | "future" | "present";
    formattedValue: string;
    formattedUnit: string;
    formattedText: string;
}

getRelativeTime() vs getRelativeTimeParts()

Both methods calculate relative time using the same algorithm.

The difference is what they return.

| Feature | getRelativeTime() | getRelativeTimeParts() | |----------|-------------------|------------------------| | Return Type | string | object | | Ready to display | ✅ | ❌ | | Custom styling | ❌ | ✅ | | Separate value and unit | ❌ | ✅ | | formattedValue | ❌ | ✅ | | formattedUnit | ❌ | ✅ | | direction | ❌ | ✅ | | formattedText | ✅ | ✅ | | Compare two dates | ✅ | ✅ | | Localization | ✅ | ✅ |


Which One Should I Use?

Use getRelativeTime() when you only need a readable string.

uiDate(post.createdAt)
    .getRelativeTime();

// "3 hours ago"

Use getRelativeTimeParts() when you're building reusable UI components or need access to the individual parts.

const {
    formattedValue,
    formattedUnit
} = uiDate(post.createdAt)
    .getRelativeTimeParts();

Recommendation

For most applications, getRelativeTime() is the simplest choice.

Choose getRelativeTimeParts() when you need:

  • Custom UI
  • Rich timeline components
  • Styled badges
  • Animated counters
  • Comparing two events
  • Reusable date components
  • Access to the numeric value and unit separately

Supported Input Types

Both APIs accept the following date inputs.

| Type | Example | |------|----------| | Date | new Date() | | ISO String | "2026-08-15" | | Timestamp | 1786752000000 |

Examples:

uiDate(new Date());

uiDate("2026-08-15");

uiDate(1786752000000);

Standalone API:

getDayName({
    input: new Date()
});

getDayName({
    input: "2026-08-15"
});

getDayName({
    input: 1786752000000
});

Localization

ui-date uses JavaScript's native Intl API.

No locale packages need to be installed.

Chainable API

uiDate("2026-08-15", "en-US")
    .getDayName();

// Saturday

uiDate("2026-08-15", "fr-FR")
    .getDayName();

// samedi

uiDate("2026-08-15", "de-DE")
    .getDayName();

// Samstag

uiDate("2026-08-15", "ja-JP")
    .getDayName();

// 土曜日

Standalone API

getDayName({
    input: "2026-08-15",
    locale: "hi-IN"
});

// शनिवार

If an invalid locale is provided, ui-date automatically falls back to the system's default locale.


Error Handling

Invalid dates throw an error instead of producing incorrect results.

uiDate("not-a-date");
Error: Invalid input: not-a-date

Standalone API behaves the same way.

getDayName({
    input: "not-a-date"
});
Error: Invalid input: not-a-date

TypeScript Support

ui-date is written in TypeScript and ships with built-in type definitions.

No additional packages are required.

import uiDate from "ui-date";

const date = uiDate();

const day: string = date.getDayName();

const year: number = date.getYear();

const weekend: boolean = date.isWeekend();

TypeScript also provides autocomplete for every available method.


Tree Shaking

Standalone functions can be imported individually.

import { getDayName } from "ui-date";

Instead of importing the entire library.

import uiDate from "ui-date";

Modern bundlers will remove unused exports, helping keep your bundle size small.


When Should I Use Which API?

| Situation | Recommended API | |-----------|-----------------| | Working with one date | Chainable API | | Calling many methods | Chainable API | | Utility functions | Standalone API | | Tree-shaking | Standalone API | | React Components | Either | | Node.js | Either | | TypeScript | Either |

There is no performance difference between the two APIs.

Choose the one that best matches your coding style.


API Summary

Chainable API

uiDate(date)

.getDayName()

.getMonthName()

.getYear()

.getMonthCount()

.getDay()

.getDate()

.getTime()

.isLeapYear()

.isWeekend()

.isToday()

.isTomorrow()

.isYesterday()

.getRelativeTime()

.getRelativeTimeParts()

.formatFullDate()

.getOverview()

Standalone API

getDayName()

getMonthName()

getYear()

getMonthCount()

getDay()

getDate()

getTime()

isLeapYear()

isWeekend()

isToday()

isTomorrow()

isYesterday()

getRelativeTime()

getRelativeTimeParts()

formatFullDate()

Contributing

Contributions are welcome.

Whether you're fixing bugs, improving documentation, adding tests, or proposing new features, every contribution is appreciated.

Clone the Repository

git clone https://github.com/AnkitYadav0271/ui-date.git

cd ui-date

Install Dependencies

npm install

Run Tests

npm test

Build

npm run build

Guidelines

Please follow these principles when contributing.

  • Keep the library dependency-free.
  • Use native JavaScript APIs whenever possible.
  • Maintain TypeScript compatibility.
  • Add tests for new features.
  • Keep the API simple and intuitive.
  • Update the documentation when adding or changing APIs.

Before opening a Pull Request, ensure all tests pass successfully.


Roadmap

Future improvements being considered:

  • Week support
  • Quarter support
  • Duration formatting
  • Time difference utilities
  • More formatting helpers
  • Additional locale improvements

Suggestions are always welcome through GitHub Issues.


License

MIT License


Author

Created and maintained by Ankit Yadav.

If you find this project useful, consider giving it a ⭐ on GitHub.

It helps others discover the project and supports future development.


Links

GitHub

https://github.com/AnkitYadav0271/ui-date

npm

https://www.npmjs.com/package/ui-date


Support

If you encounter a bug or have a feature request, please open an issue on GitHub.

Questions, suggestions, and contributions are always welcome.


Thank you for using ui-date ❤️