JavaScript Date & Libraries
Generate date code for vanilla JavaScript, dayjs, and date-fns. Pick a library and operation — get copy-ready code with imports.
Select a library and operation above
How to Use This Tool
Select a JavaScript library from the tabs — vanilla JS (no dependencies), dayjs (lightweight Moment.js replacement), or date-fns (tree-shakeable utility functions). Then pick an operation. The tool generates practical code with the correct imports, realistic examples, and comments explaining the gotchas you're likely to hit.
Every code block includes the import statement so you can paste it directly into your project. Vanilla JS examples use Intl.DateTimeFormat for formatting where possible — it's built into every modern browser and Node.js, and handles locales correctly.
Method Comparison
The same operation across all three approaches. Use this to choose the right tool or translate between them.
| Operation | Vanilla JS | dayjs | date-fns |
|---|---|---|---|
| Current date | new Date() | dayjs() | new Date() |
| From string | new Date('2026-03-26') | dayjs('2026-03-26') | parseISO('2026-03-26') |
| Format | d.toLocaleDateString() | d.format('YYYY-MM-DD') | format(d, 'yyyy-MM-dd') |
| Add 7 days | d.setDate(d.getDate()+7) | d.add(7, 'day') | addDays(d, 7) |
| Subtract 3 months | d.setMonth(d.getMonth()-3) | d.subtract(3, 'month') | subMonths(d, 3) |
| Diff in days | (b-a)/86400000 | b.diff(a, 'day') | differenceInDays(b, a) |
| Start of month | new Date(y, m, 1) | d.startOf('month') | startOfMonth(d) |
| Is before? | a < b | a.isBefore(b) | isBefore(a, b) |
| Is valid? | !isNaN(d.getTime()) | d.isValid() | isValid(d) |
| UTC | d.toISOString() | dayjs.utc() | d.toISOString() |
| Epoch (ms) | Date.now() | dayjs().valueOf() | getTime(d) |
| Epoch (sec) | Date.now()/1000|0 | dayjs().unix() | getUnixTime(d) |
Library Comparison
| Feature | Vanilla JS | dayjs | date-fns |
|---|---|---|---|
| Install | Built-in | npm i dayjs | npm i date-fns |
| Bundle size | 0 KB | ~2 KB gzip | Tree-shakeable (per-function) |
| API style | OOP (mutable) | OOP (immutable, chainable) | Functional (pure functions) |
| Immutable | No — methods mutate | Yes — returns new instance | Yes — returns new Date |
| Timezone support | Intl.DateTimeFormat | Plugin: dayjs/plugin/utc + timezone | date-fns-tz package |
| Locale support | Intl (browser-native) | Plugin: per-locale files | Built-in locale modules |
| TypeScript | Built-in types | Built-in types | Built-in types |
| Moment.js drop-in? | No | Yes (nearly identical API) | No (different paradigm) |
| Best for | Simple ops, no deps | Moment.js migration, small bundles | Large apps, tree-shaking |
Intl.DateTimeFormat Options
The built-in Intl.DateTimeFormat is the most powerful vanilla formatting tool. It handles locales, timezones, and calendar systems natively.
| Option | Values | Example output |
|---|---|---|
| year | 'numeric' | '2-digit' | 2026 | 26 |
| month | 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | 3 | 03 | March | Mar | M |
| day | 'numeric' | '2-digit' | 26 | 26 |
| weekday | 'long' | 'short' | 'narrow' | Thursday | Thu | T |
| hour | 'numeric' | '2-digit' | 2 | 02 |
| minute | 'numeric' | '2-digit' | 30 | 30 |
| second | 'numeric' | '2-digit' | 45 | 45 |
| hour12 | true | false | 2:30 PM | 14:30 |
| timeZone | IANA string | 'America/New_York' |
| timeZoneName | 'long' | 'short' | Eastern Daylight Time | EDT |
dayjs Format Tokens
| Token | Meaning | Example |
|---|---|---|
| YYYY | 4-digit year | 2026 |
| YY | 2-digit year | 26 |
| MM | Month (zero-padded) | 03 |
| M | Month (no padding) | 3 |
| DD | Day (zero-padded) | 26 |
| D | Day (no padding) | 26 |
| HH | Hour, 24h (zero-padded) | 14 |
| hh | Hour, 12h (zero-padded) | 02 |
| mm | Minute | 30 |
| ss | Second | 45 |
| A | AM/PM | PM |
| dddd | Full weekday | Thursday |
| ddd | Short weekday | Thu |
| MMMM | Full month name | March |
| MMM | Short month name | Mar |
| Z | UTC offset | -05:00 |
| X | Unix seconds (advancedFormat plugin) | 1774533600 |
| x | Unix milliseconds (advancedFormat plugin) | 1774533600000 |
Common Gotchas
JavaScript's Date API has well-known traps. Knowing these saves hours of debugging.
| Gotcha | What happens | Fix |
|---|---|---|
| Month is 0-indexed | new Date(2026, 0, 1) = Jan 1 | Remember: 0=Jan, 11=Dec |
| ISO string parsed as UTC | new Date('2026-01-01') = Dec 31 local | Add time: '2026-01-01T00:00:00' or use constructor |
| Non-ISO parsed as local | new Date('01/01/2026') = Jan 1 local | Inconsistent — avoid string parsing |
| Date methods mutate | d.setDate(d.getDate()+1) changes d | Clone first: new Date(d) |
| Invalid date is silent | new Date('garbage') doesn't throw | Check: isNaN(d.getTime()) |
| getYear() vs getFullYear() | getYear() returns year - 1900 | Always use getFullYear() |
Common Patterns & Recipes
Format a date for display
Get relative time ("3 hours ago")
List all dates in a range
Frequently Asked Questions
How do I get the current date in JavaScript?
new Date() gives the current date and time. For a formatted string: new Date().toLocaleDateString(). For ISO format: new Date().toISOString(). Remember that getMonth() is zero-indexed — January is 0, not 1.
Should I use dayjs or date-fns?
dayjs if you want a Moment.js-like chainable API in ~2KB: dayjs().add(7, 'day').format('YYYY-MM-DD'). date-fns if you want tree-shakeable pure functions: format(addDays(new Date(), 7), 'yyyy-MM-dd'). Both are well-maintained and have TypeScript support. dayjs is simpler; date-fns is more bundle-efficient in large projects.
How do I format a date without a library?
Use Intl.DateTimeFormat: new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(date) gives "March 26, 2026". For ISO: date.toISOString().slice(0, 10). For custom formats, toLocaleDateString with options handles most cases without a library.
Why does new Date('2026-01-01') give the wrong day?
ISO date strings without a time component are parsed as UTC midnight. In US time zones, UTC midnight is still December 31 local time. Fix: use new Date('2026-01-01T00:00:00') (parsed as local) or the constructor new Date(2026, 0, 1) (month is 0-indexed).
How do I add days to a date in JavaScript?
Vanilla: const d = new Date(); d.setDate(d.getDate() + 30) — but this mutates d. dayjs: dayjs().add(30, 'day') — immutable, returns new instance. date-fns: addDays(new Date(), 30) — returns a new Date. For months/years, dayjs and date-fns handle month boundaries correctly; vanilla requires more care.
How do I calculate the difference between two dates?
Vanilla: Math.round((date2 - date1) / 86400000) for days (86400000 = ms per day). dayjs: dayjs(date2).diff(dayjs(date1), 'day'). date-fns: differenceInDays(date2, date1). For months or years, use a library — manual month/year math is error-prone due to variable month lengths.