Top Related Projects
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
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.
⏳ 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.
⏰ 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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
fecha
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 |
Top Related Projects
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot