Convert Figma logo to code with AI

taylorhakes logofecha

Lightweight and simple JS date formatting and parsing

2,064
125
2,064
8

Top Related Projects

47,953

Parse, validate, manipulate, and display dates in javascript.

34,434

⏳ Modern JavaScript date utility library ⌛️

46,619

⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

A tiny (349B) reusable date formatter. Extremely fast!

Quick Overview

Fecha is a lightweight JavaScript date formatting and parsing library. It provides a simple and efficient way to format dates and parse date strings, with a focus on performance and a small footprint.

Pros

  • Lightweight and fast, with no dependencies
  • Supports both formatting dates and parsing date strings
  • Customizable formatting options
  • Works in both browser and Node.js environments

Cons

  • Limited localization support compared to more comprehensive libraries
  • Fewer features than larger date manipulation libraries like Moment.js
  • Not actively maintained (last commit was in 2019)

Code Examples

Formatting a date:

import { format } from 'fecha';

const date = new Date(2023, 3, 15, 14, 30, 0);
const formattedDate = format(date, 'YYYY-MM-DD HH:mm');
console.log(formattedDate); // Output: 2023-04-15 14:30

Parsing a date string:

import { parse } from 'fecha';

const dateString = '2023-04-15 14:30';
const parsedDate = parse(dateString, 'YYYY-MM-DD HH:mm');
console.log(parsedDate); // Output: Sat Apr 15 2023 14:30:00 GMT+0000 (Coordinated Universal Time)

Custom formatting:

import { format } from 'fecha';

const date = new Date(2023, 3, 15, 14, 30, 0);
const customFormat = 'dddd, MMMM Do YYYY, h:mm A';
const formattedDate = format(date, customFormat);
console.log(formattedDate); // Output: Saturday, April 15th 2023, 2:30 PM

Getting Started

To use Fecha in your project, first install it via npm:

npm install fecha

Then, import and use the library in your JavaScript code:

import { format, parse } from 'fecha';

const date = new Date();
const formattedDate = format(date, 'YYYY-MM-DD');
console.log(formattedDate);

const parsedDate = parse('2023-04-15', 'YYYY-MM-DD');
console.log(parsedDate);

For more advanced usage and configuration options, refer to the project's documentation on GitHub.

Competitor Comparisons

47,953

Parse, validate, manipulate, and display dates in javascript.

Pros of Moment

  • More comprehensive feature set, including parsing, formatting, and manipulation of dates and times
  • Extensive localization support for multiple languages and cultures
  • Large community and ecosystem with numerous plugins and extensions

Cons of Moment

  • Larger bundle size, which can impact performance in web applications
  • Mutable API design, which can lead to unexpected side effects
  • No longer actively maintained, with the maintainers recommending alternatives

Code Comparison

Moment:

moment().format('MMMM Do YYYY, h:mm:ss a');
moment().add(7, 'days');
moment('2010-10-20').isBefore('2010-10-21');

Fecha:

fecha.format(new Date(), 'MMMM Do YYYY, h:mm:ss a');
fecha.format(fecha.addDays(new Date(), 7), 'YYYY-MM-DD');
fecha.parse('2010-10-20', 'YYYY-MM-DD') < fecha.parse('2010-10-21', 'YYYY-MM-DD');

Summary

Moment offers a more feature-rich solution with extensive localization support, while Fecha provides a lightweight alternative focused on parsing and formatting. Moment's larger size and mutable API are drawbacks, especially for modern web applications. Fecha's simpler API and smaller footprint make it a good choice for projects with basic date handling needs, but it lacks some of Moment's advanced features.

34,434

⏳ Modern JavaScript date utility library ⌛️

Pros of date-fns

  • More comprehensive feature set with a wide range of date manipulation functions
  • Modular architecture allowing for tree-shaking and smaller bundle sizes
  • Active development and larger community support

Cons of date-fns

  • Larger overall package size if not using tree-shaking
  • Steeper learning curve due to more extensive API

Code Comparison

fecha:

import fecha from 'fecha';

const formattedDate = fecha.format(new Date(), 'YYYY-MM-DD');
const parsedDate = fecha.parse('2023-05-15', 'YYYY-MM-DD');

date-fns:

import { format, parse } from 'date-fns';

const formattedDate = format(new Date(), 'yyyy-MM-dd');
const parsedDate = parse('2023-05-15', 'yyyy-MM-dd', new Date());

Summary

date-fns offers a more extensive set of features and better modularity, making it suitable for larger projects with complex date manipulation requirements. It benefits from active development and a larger community. However, it may have a steeper learning curve and potentially larger bundle size if not optimized.

fecha, on the other hand, is a lightweight alternative that provides basic date formatting and parsing functionality. It's simpler to use and has a smaller footprint, making it ideal for projects with minimal date-related needs.

The choice between the two libraries depends on the specific requirements of your project, considering factors such as feature needs, bundle size constraints, and development complexity.

46,619

⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

Pros of dayjs

  • More comprehensive API with a wider range of date manipulation and formatting options
  • Supports plugins for extended functionality and localization
  • Actively maintained with frequent updates and a larger community

Cons of dayjs

  • Slightly larger file size compared to fecha
  • May have a steeper learning curve due to more extensive features

Code Comparison

fecha:

import fecha from 'fecha';

const formattedDate = fecha.format(new Date(), 'YYYY-MM-DD');
const parsedDate = fecha.parse('2023-05-15', 'YYYY-MM-DD');

dayjs:

import dayjs from 'dayjs';

const formattedDate = dayjs().format('YYYY-MM-DD');
const parsedDate = dayjs('2023-05-15');

Both libraries offer similar basic functionality for date formatting and parsing. However, dayjs provides a more chainable API and additional methods for date manipulation:

const nextWeek = dayjs().add(1, 'week');
const startOfMonth = dayjs().startOf('month');

fecha focuses on simplicity and lightweight implementation, while dayjs offers a more feature-rich experience with plugin support and a larger ecosystem. The choice between the two depends on the specific requirements of your project and the level of date manipulation functionality needed.

A tiny (349B) reusable date formatter. Extremely fast!

Pros of tinydate

  • Extremely lightweight (340 bytes minified + gzipped)
  • Faster performance due to its minimalistic approach
  • Simple API with a focus on string formatting

Cons of tinydate

  • Limited functionality compared to fecha
  • No parsing capabilities, only formatting
  • Less flexibility in handling different date formats

Code Comparison

tinydate:

import tinydate from 'tinydate';
const stamp = tinydate('{YYYY}-{MM}-{DD}');
console.log(stamp(new Date()));

fecha:

import fecha from 'fecha';
const formattedDate = fecha.format(new Date(), 'YYYY-MM-DD');
console.log(formattedDate);

Summary

tinydate is a ultra-lightweight date formatting library, focusing on simplicity and performance. It's ideal for projects where size is a critical factor and only basic date formatting is required. However, it lacks the extensive functionality and flexibility offered by fecha.

fecha, on the other hand, provides a more comprehensive set of features, including both parsing and formatting capabilities. It supports a wider range of date formats and offers more flexibility in handling different date scenarios. While it's larger in size, it's still relatively lightweight compared to many other date libraries.

Choose tinydate for minimal, performance-focused date formatting, and fecha for a more feature-rich date manipulation library with broader capabilities.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

fecha Build Status

Lightweight date formatting and parsing (~2KB). Meant to replace parsing and formatting functionality of moment.js.

NPM

npm install fecha --save

Yarn

yarn add fecha

Fecha vs Moment

Fecha Moment
Size (Min. and Gzipped) 2.1KBs 13.1KBs
Date Parsing
Date Formatting
Date Manipulation
I18n Support

Use it

Formatting

format accepts a Date object (or timestamp) and a string format and returns a formatted string. See below for available format tokens.

Note: format will throw an error when passed invalid parameters

import { format } from 'fecha';

type format = (date: Date, format?: string, i18n?: I18nSettings) => str;

// Custom formats
format(new Date(2015, 10, 20), 'dddd MMMM Do, YYYY'); // 'Friday November 20th, 2015'
format(new Date(1998, 5, 3, 15, 23, 10, 350), 'YYYY-MM-DD hh:mm:ss.SSS A'); // '1998-06-03 03:23:10.350 PM'

// Named masks
format(new Date(2015, 10, 20), 'isoDate'); // '2015-11-20'
format(new Date(2015, 10, 20), 'mediumDate'); // 'Nov 20, 2015'
format(new Date(2015, 10, 20, 3, 2, 1), 'isoDateTime'); // '2015-11-20T03:02:01-05:00'
format(new Date(2015, 2, 10, 5, 30, 20), 'shortTime'); // '05:30'

// Literals
format(new Date(2001, 2, 5, 6, 7, 2, 5), '[on] MM-DD-YYYY [at] HH:mm'); // 'on 03-05-2001 at 06:07'

Parsing

parse accepts a Date string and a string format and returns a Date object. See below for available format tokens.

NOTE: parse will throw an error when passed invalid string format or missing format. You MUST specify a format.

import { parse } from 'fecha';

type parse = (dateStr: string, format: string, i18n?: I18nSettingsOptional) => Date|null;

// Custom formats
parse('February 3rd, 2014', 'MMMM Do, YYYY'); // new Date(2014, 1, 3)
parse('10-12-10 14:11:12', 'YY-MM-DD HH:mm:ss'); // new Date(2010, 11, 10, 14, 11, 12)

// Named masks
parse('5/3/98', 'shortDate'); // new Date(1998, 4, 3)
parse('November 4, 2005', 'longDate'); // new Date(2005, 10, 4)
parse('2015-11-20T03:02:01-05:00', 'isoDateTime'); // new Date(2015, 10, 20, 3, 2, 1)

// Override i18n
parse('4 de octubre de 1983', 'M de MMMM de YYYY', {
  monthNames: [
    'enero',
    'febrero',
    'marzo',
    'abril',
    'mayo',
    'junio',
    'julio',
    'agosto',
    'septiembre',
    'octubre',
    'noviembre',
    'diciembre'
  ]
}); // new Date(1983, 9, 4)

i18n Support

import {setGlobalDateI18n} from 'fecha';

/*
Default I18n Settings
{
  dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
  dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  amPm: ['am', 'pm'],
  // D is the day of the month, function returns something like...  3rd or 11th
  DoFn(dayOfMonth) {
    return dayOfMonth + [ 'th', 'st', 'nd', 'rd' ][ dayOfMonth % 10 > 3 ? 0 : (dayOfMonth - dayOfMonth % 10 !== 10) * dayOfMonth % 10 ];
  }
}
*/

setGlobalDateI18n({
  dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
  dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  amPm: ['am', 'pm'],
  // D is the day of the month, function returns something like...  3rd or 11th
  DoFn: function (D) {
    return D + [ 'th', 'st', 'nd', 'rd' ][ D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10 ];
  }
});

Custom Named Masks

import { format, setGlobalDateMasks } from 'fecha';
/*
Default global masks
{
  default: 'ddd MMM DD YYYY HH:mm:ss',
  shortDate: 'M/D/YY',
  mediumDate: 'MMM D, YYYY',
  longDate: 'MMMM D, YYYY',
  fullDate: 'dddd, MMMM D, YYYY',
  shortTime: 'HH:mm',
  mediumTime: 'HH:mm:ss',
  longTime: 'HH:mm:ss.SSS'
}
*/

// Create a new mask
setGlobalDateMasks({
  myMask: 'HH:mm:ss YY/MM/DD';
});

// Use it
format(new Date(2014, 5, 6, 14, 10, 45), 'myMask'); // '14:10:45 14/06/06'

Formatting Tokens

Token Output
Month M 1 2 ... 11 12
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Day of Month D 1 2 ... 30 31
Do 1st 2nd ... 30th 31st
DD 01 02 ... 30 31
Day of Week d 0 1 ... 5 6
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
Year YY 70 71 ... 29 30
YYYY 1970 1971 ... 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 11 12
hh 01 02 ... 11 12
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 0 1 ... 98 99
SSS 0 1 ... 998 999
Timezone Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700

NPM DownloadsLast 30 Days