-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Expand file tree
/
Copy pathindex.html
More file actions
71 lines (71 loc) · 30 KB
/
Copy pathindex.html
File metadata and controls
71 lines (71 loc) · 30 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Introduction to Day.js - dayjs</title><meta name="description" content="**Day.js** is a minimalist JavaScript date library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js."/><meta name="generator" content="Sourcey 3.6.4"/><meta property="og:title" content="Introduction to Day.js - dayjs"/><meta property="og:description" content="**Day.js** is a minimalist JavaScript date library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js."/><meta property="og:type" content="website"/><meta property="og:site_name" content="dayjs"/><meta property="og:image" content="_og/documentation/introduction.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:type" content="image/png"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Introduction to Day.js - dayjs"/><meta name="twitter:description" content="**Day.js** is a minimalist JavaScript date library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js."/><meta name="twitter:image" content="_og/documentation/introduction.png"/><meta name="sourcey-search" content="search-index.json"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"/><style>
:root {
--color-primary: 121 40 202;
--color-primary-light: 121 40 202;
--color-primary-dark: 121 40 202;
--color-primary-ink: 121 40 202;
--color-background-light: 255 255 255;
--color-background-dark: 11 12 16;
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace;
--sidebar-width: 18rem;
--toc-width: 19rem;
--content-max-width: 44rem;
--header-height: 7.5rem;
}
html { scroll-padding-top: var(--header-height); }
@media (min-width: 1024px) {
:root { --header-height: 4rem; }
}
body { margin: 0; background: rgb(var(--color-background-light)); }
.dark body { background: rgb(var(--color-background-dark)); }
</style><script>(function(){var t=localStorage.getItem('sourcey-theme');if(t==='dark')document.documentElement.classList.add('dark')})()</script><link rel="stylesheet" href="sourcey.css"/></head><body id="sourcey"><div id="page" class="relative antialiased text-[rgb(var(--color-gray-500))] dark:text-[rgb(var(--color-gray-400))]"><div id="navbar" class="z-30 fixed lg:sticky top-0 w-full"><div class="absolute w-full h-full flex-none border-b border-[rgb(var(--color-gray-200)/0.7)] dark:border-[rgb(var(--color-gray-300)/0.06)] bg-[rgb(var(--color-background-light))] dark:bg-[rgb(var(--color-background-dark))]"></div><div class="max-w-[92rem] mx-auto relative"><div class="relative"><div class="flex items-center lg:px-12 h-16 min-w-0 mx-4 lg:mx-0"><div class="h-full relative flex-1 flex items-center gap-x-4 min-w-0 border-b border-[rgb(var(--color-gray-500)/0.08)] dark:border-[rgb(var(--color-gray-300)/0.08)]"><div class="flex-1 flex items-center gap-x-4"><a href="documentation/introduction.html" class="select-none inline-block"><span class="text-sm font-semibold text-[rgb(var(--color-gray-900))] dark:text-[rgb(var(--color-gray-200))]">dayjs</span></a></div><div class="relative hidden lg:flex items-center flex-1 z-20 gap-2"><button id="search-open" type="button" class="group flex pointer-events-auto rounded-lg w-full items-center text-sm leading-6 h-9 pl-3.5 pr-3 text-[rgb(var(--color-gray-500))] dark:text-[rgb(var(--color-gray-400))] ring-1 ring-[rgb(var(--color-gray-400)/0.3)] hover:ring-[rgb(var(--color-gray-600)/0.3)] dark:ring-[rgb(var(--color-gray-600)/0.3)] dark:hover:ring-[rgb(var(--color-gray-500)/0.3)] justify-between truncate gap-2 min-w-[43px] cursor-pointer bg-[rgb(var(--color-background-light))] dark:bg-[rgb(var(--color-background-dark))] dark:brightness-110 dark:hover:brightness-125"><div class="flex items-center gap-2 min-w-[42px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="min-w-4 flex-none"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><div class="truncate min-w-0">Type <kbd>/</kbd> to search</div></div></button></div><div class="flex-1 relative hidden lg:flex items-center ml-auto justify-end space-x-4"><nav class="text-sm"><ul class="flex space-x-6 items-center"><li><a href="https://github.com/iamkun/dayjs" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="text-[rgb(var(--color-gray-500))] hover:text-[rgb(var(--color-gray-700))] dark:text-[rgb(var(--color-gray-400))] dark:hover:text-[rgb(var(--color-gray-300))]"><svg viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></li></ul></nav><button id="theme-toggle" type="button" aria-label="Toggle theme" class="p-2 flex items-center justify-center cursor-pointer text-[rgb(var(--color-gray-400))] hover:text-[rgb(var(--color-gray-600))] dark:text-[rgb(var(--color-gray-500))] dark:hover:text-[rgb(var(--color-gray-300))]"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" class="h-4 w-4 block dark:hidden"><g stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 1.11V2"></path><path d="M12.87 3.13L12.24 3.76"></path><path d="M14.89 8H14"></path><path d="M12.87 12.87L12.24 12.24"></path><path d="M8 14.89V14"></path><path d="M3.13 12.87L3.76 12.24"></path><path d="M1.11 8H2"></path><path d="M3.13 3.13L3.76 3.76"></path><circle cx="8" cy="8" r="3.78"></circle></g></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-4 w-4 hidden dark:block"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></button></div><div class="flex lg:hidden items-center gap-3"><button id="search-open-mobile" type="button" aria-label="Search" class="text-[rgb(var(--color-gray-500))] w-8 h-8 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="min-w-4 flex-none"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></button><button type="button" data-drawer-slide="right" aria-label="Open menu" class="text-[rgb(var(--color-gray-500))] w-8 h-8 flex items-center justify-center hover:text-[rgb(var(--color-gray-600))]"><svg class="h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"></path></svg></button></div></div></div></div><div class="flex lg:hidden items-center h-14 px-5 text-sm overflow-hidden"><div class="flex items-center min-w-0 space-x-3 leading-6 whitespace-nowrap"><span class="font-semibold text-[rgb(var(--color-gray-900))] dark:text-[rgb(var(--color-gray-200))] truncate min-w-0">Introduction to Day.js</span></div></div></div></div><span class="fixed inset-0 bg-[rgb(var(--color-background-light))] dark:bg-[rgb(var(--color-background-dark))] -z-10 pointer-events-none"></span><div class="max-w-[92rem] mx-auto relative px-4 lg:px-8"><div id="sidebar" class="z-20 hidden lg:block fixed bottom-0 right-auto w-[18rem]" style="top: var(--header-height)"><div class="absolute inset-0 z-10 overflow-auto pr-8 pb-10" data-sourcey-sidebar-scroll="true" data-sourcey-sidebar-tab="documentation"><div class="relative text-sm leading-6"><div class="sticky top-0 h-8 z-10 bg-gradient-to-b from-[rgb(var(--color-background-light))] dark:from-[rgb(var(--color-background-dark))]"></div><nav id="nav" role="navigation"><div class><h5 class="nav-group-label">Getting Started</h5><ul class="space-y-px"><li><a href="documentation/introduction.html" class="nav-link active"><span class="flex-1 break-words [word-break:break-word]">Introduction to Day.js</span></a></li><li><a href="documentation/installation.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Installation</span></a></li></ul></div><div class="mt-6 lg:mt-8"><h5 class="nav-group-label">API Reference</h5><ul class="space-y-px"><li><a href="documentation/parsing.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Parsing</span></a></li><li><a href="documentation/get-set.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Get + Set</span></a></li><li><a href="documentation/manipulating.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Manipulating</span></a></li><li><a href="documentation/displaying.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Display</span></a></li><li><a href="documentation/querying.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Query</span></a></li><li><a href="documentation/formatting.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Formatting Tokens</span></a></li></ul></div><div class="mt-6 lg:mt-8"><h5 class="nav-group-label">Advanced</h5><ul class="space-y-px"><li><a href="documentation/plugins.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Plugins</span></a></li><li><a href="documentation/i18n.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Internationalization (i18n)</span></a></li></ul></div></nav></div></div></div><dialog id="mobile-nav" class="mobile-nav-dialog"><nav class="pt-5 pb-3 px-4 flex-1 overflow-y-auto"><div class><h5 class="nav-group-label">Getting Started</h5><ul class="space-y-px"><li><a href="documentation/introduction.html" class="nav-link active"><span class="flex-1 break-words [word-break:break-word]">Introduction to Day.js</span></a></li><li><a href="documentation/installation.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Installation</span></a></li></ul></div><div class="mt-6 lg:mt-8"><h5 class="nav-group-label">API Reference</h5><ul class="space-y-px"><li><a href="documentation/parsing.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Parsing</span></a></li><li><a href="documentation/get-set.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Get + Set</span></a></li><li><a href="documentation/manipulating.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Manipulating</span></a></li><li><a href="documentation/displaying.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Display</span></a></li><li><a href="documentation/querying.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Query</span></a></li><li><a href="documentation/formatting.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Formatting Tokens</span></a></li></ul></div><div class="mt-6 lg:mt-8"><h5 class="nav-group-label">Advanced</h5><ul class="space-y-px"><li><a href="documentation/plugins.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Plugins</span></a></li><li><a href="documentation/i18n.html" class="nav-link"><span class="flex-1 break-words [word-break:break-word]">Internationalization (i18n)</span></a></li></ul></div></nav><div class="px-4 py-3 border-t border-[rgb(var(--color-gray-200)/0.7)] dark:border-[rgb(var(--color-gray-800)/0.5)] shrink-0"><ul class="space-y-3"><li><a href="https://github.com/iamkun/dayjs" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2.5 text-[rgb(var(--color-gray-600))] hover:text-[rgb(var(--color-gray-900))] dark:text-[rgb(var(--color-gray-400))] dark:hover:text-[rgb(var(--color-gray-200))]"><svg viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>GitHub</span></a></li></ul></div></dialog><main id="docs" class="pt-[8.5rem] lg:pt-10"><div class="flex flex-row-reverse gap-12 box-border w-full"><aside id="toc" class="hidden xl:flex self-start sticky xl:flex-col max-w-[28rem] z-[21]" style="height: calc(100vh - var(--header-height) - 2.5rem); top: calc(var(--header-height) + 2.5rem)"><div class="z-10 hidden xl:flex box-border max-h-full pl-10 w-[19rem]"><div class="text-[rgb(var(--color-gray-600))] text-sm leading-6 w-[16.5rem] overflow-y-auto space-y-2 pb-4 -mt-10 pt-10"><h5 class="font-medium text-[rgb(var(--color-gray-700))] dark:text-[rgb(var(--color-gray-300))] flex items-center gap-2"><svg class="shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg>On this page</h5><nav><ul><li><a href="#why-day-js" class="toc-item break-words block hover:text-[rgb(var(--color-gray-900))] dark:hover:text-[rgb(var(--color-gray-300))] dark:text-[rgb(var(--color-gray-400))] transition-colors py-1 font-medium">Why Day.js?</a></li><li><a href="#key-concepts" class="toc-item break-words block hover:text-[rgb(var(--color-gray-900))] dark:hover:text-[rgb(var(--color-gray-300))] dark:text-[rgb(var(--color-gray-400))] transition-colors py-1 font-medium">Key Concepts</a><ul class="mb-2"><li><a href="#immutability" class="toc-item break-words block hover:text-[rgb(var(--color-gray-900))] dark:hover:text-[rgb(var(--color-gray-300))] dark:text-[rgb(var(--color-gray-400))] transition-colors pl-3 py-1 text-[rgb(var(--color-gray-500))]">Immutability</a></li><li><a href="#chaining" class="toc-item break-words block hover:text-[rgb(var(--color-gray-900))] dark:hover:text-[rgb(var(--color-gray-300))] dark:text-[rgb(var(--color-gray-400))] transition-colors pl-3 py-1 text-[rgb(var(--color-gray-500))]">Chaining</a></li><li><a href="#plugin-system" class="toc-item break-words block hover:text-[rgb(var(--color-gray-900))] dark:hover:text-[rgb(var(--color-gray-300))] dark:text-[rgb(var(--color-gray-400))] transition-colors pl-3 py-1 text-[rgb(var(--color-gray-500))]">Plugin System</a></li></ul></li><li><a href="#comparison-with-moment-js" class="toc-item break-words block hover:text-[rgb(var(--color-gray-900))] dark:hover:text-[rgb(var(--color-gray-300))] dark:text-[rgb(var(--color-gray-400))] transition-colors py-1 font-medium">Comparison with Moment.js</a></li></ul></nav></div></div></aside><div class="relative grow box-border flex-col w-full mx-auto px-1 min-w-0 lg:pl-[23.7rem] lg:-ml-12 xl:w-[calc(100%-28rem)]" id="content-area"><header class="relative leading-none"><div class="mt-0.5 space-y-2.5"><div class="h-5 text-[rgb(var(--color-primary-ink))] dark:text-[rgb(var(--color-primary-light))] text-sm font-semibold">Getting Started</div><div class="flex flex-col sm:flex-row items-start sm:items-center relative gap-2 min-w-0"><h1 class="text-2xl sm:text-3xl text-[rgb(var(--color-gray-900))] tracking-tight dark:text-[rgb(var(--color-gray-200))] font-bold" style="overflow-wrap: anywhere">Introduction to Day.js</h1></div></div><div class="page-description mt-2 text-lg prose prose-gray dark:prose-invert" style="overflow-wrap: anywhere"><span><strong>Day.js</strong> is a minimalist JavaScript date library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.</span></div></header><div class="prose prose-gray dark:prose-invert relative mt-8 mb-14 max-w-none"><p><strong>Day.js</strong> is a minimalist JavaScript date library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.</p>
<h2 id="why-day-js">Why Day.js?</h2>
<ul>
<li><strong>Tiny size</strong>: Only ~2KB gzipped (<code>dayjs.min.js</code>), max 2.99 KB. Compare to Moment.js at ~67KB.</li>
<li><strong>Immutable</strong>: All API operations that change the Day.js object return a new instance instead of mutating the original.</li>
<li><strong>Chainable</strong>: Methods can be chained naturally: <code>dayjs().startOf('month').add(1, 'day').format('YYYY-MM-DD')</code>.</li>
<li><strong>Plugin architecture</strong>: Core is minimal; extend with plugins only when you need them.</li>
<li><strong>i18n</strong>: Internationalization support with locale files loaded on demand.</li>
<li><strong>TypeScript support</strong>: Type definitions included via <code>index.d.ts</code>.</li>
<li><strong>Moment.js-compatible API</strong>: Familiar API patterns for anyone who has used Moment.js.</li>
</ul>
<h2 id="key-concepts">Key Concepts</h2>
<h3 id="immutability">Immutability</h3>
<p>Once a Day.js object is created, it cannot be changed. Any operation that modifies the date returns a <strong>new</strong> Day.js instance:</p>
<div class="prose-code-block not-prose">
<div class="prose-code-copy">
<button aria-label="Copy code" class="copy-btn" type="button" data-copy-source="code"><svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">Copy<path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
</div>
<div class="prose-code-content"><pre class="shiki shiki-themes github-light-default dark-plus" style="--shiki-light:#1f2328;--shiki-dark:#D4D4D4;--shiki-light-bg:#ffffff;--shiki-dark-bg:#1E1E1E" tabindex="0"><code><span class="line"><span style="--shiki-light:#CF222E;--shiki-dark:#569CD6">const</span><span style="--shiki-light:#0550AE;--shiki-dark:#4FC1FF"> d1</span><span style="--shiki-light:#CF222E;--shiki-dark:#D4D4D4"> =</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA"> dayjs</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">();</span></span>
<span class="line"><span style="--shiki-light:#CF222E;--shiki-dark:#569CD6">const</span><span style="--shiki-light:#0550AE;--shiki-dark:#4FC1FF"> d2</span><span style="--shiki-light:#CF222E;--shiki-dark:#D4D4D4"> =</span><span style="--shiki-light:#1F2328;--shiki-dark:#9CDCFE"> d1</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">.</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">add</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#0550AE;--shiki-dark:#B5CEA8">1</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">, </span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178">'day'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">);</span></span>
<span class="line"><span style="--shiki-light:#6E7781;--shiki-dark:#6A9955">// d1 is unchanged, d2 is a new Day.js object</span></span></code></pre></div>
</div><h3 id="chaining">Chaining</h3>
<p>Day.js methods can be chained together:</p>
<div class="prose-code-block not-prose">
<div class="prose-code-copy">
<button aria-label="Copy code" class="copy-btn" type="button" data-copy-source="code"><svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">Copy<path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
</div>
<div class="prose-code-content"><pre class="shiki shiki-themes github-light-default dark-plus" style="--shiki-light:#1f2328;--shiki-dark:#D4D4D4;--shiki-light-bg:#ffffff;--shiki-dark-bg:#1E1E1E" tabindex="0"><code><span class="line"><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">dayjs</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">()</span></span>
<span class="line"><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4"> .</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">startOf</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178">'month'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">)</span></span>
<span class="line"><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4"> .</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">add</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#0550AE;--shiki-dark:#B5CEA8">7</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">, </span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178">'day'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">)</span></span>
<span class="line"><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4"> .</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">set</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178">'hour'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">, </span><span style="--shiki-light:#0550AE;--shiki-dark:#B5CEA8">8</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">)</span></span>
<span class="line"><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4"> .</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">format</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178">'YYYY-MM-DD HH:mm:ss'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">);</span></span>
<span class="line"><span style="--shiki-light:#6E7781;--shiki-dark:#6A9955">// e.g. "2024-06-08 08:00:00"</span></span></code></pre></div>
</div><h3 id="plugin-system">Plugin System</h3>
<p>The core library is intentionally minimal. Additional features are loaded via plugins:</p>
<div class="prose-code-block not-prose">
<div class="prose-code-copy">
<button aria-label="Copy code" class="copy-btn" type="button" data-copy-source="code"><svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">Copy<path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
</div>
<div class="prose-code-content"><pre class="shiki shiki-themes github-light-default dark-plus" style="--shiki-light:#1f2328;--shiki-dark:#D4D4D4;--shiki-light-bg:#ffffff;--shiki-dark-bg:#1E1E1E" tabindex="0"><code><span class="line"><span style="--shiki-light:#CF222E;--shiki-dark:#C586C0">import</span><span style="--shiki-light:#1F2328;--shiki-dark:#9CDCFE"> relativeTime</span><span style="--shiki-light:#CF222E;--shiki-dark:#C586C0"> from</span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178"> 'dayjs/plugin/relativeTime'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">;</span></span>
<span class="line"><span style="--shiki-light:#1F2328;--shiki-dark:#9CDCFE">dayjs</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">.</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">extend</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#1F2328;--shiki-dark:#9CDCFE">relativeTime</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">dayjs</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(</span><span style="--shiki-light:#0A3069;--shiki-dark:#CE9178">'2020-01-01'</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">).</span><span style="--shiki-light:#8250DF;--shiki-dark:#DCDCAA">fromNow</span><span style="--shiki-light:#1F2328;--shiki-dark:#D4D4D4">(); </span><span style="--shiki-light:#6E7781;--shiki-dark:#6A9955">// "4 years ago"</span></span></code></pre></div>
</div><h2 id="comparison-with-moment-js">Comparison with Moment.js</h2>
<div class="table-wrap"><table><thead><tr><th>Feature</th><th>Day.js</th><th>Moment.js</th></tr></thead><tbody><tr><td>Size</td><td>~2KB gzipped</td><td>~67KB gzipped</td></tr>
<tr><td>Immutable</td><td>Yes</td><td>No</td></tr>
<tr><td>Plugin system</td><td>Yes</td><td>No</td></tr>
<tr><td>API compatibility</td><td>High</td><td>—</td></tr>
<tr><td>Tree-shakeable</td><td>Yes</td><td>No</td></tr></tbody></table></div></div><nav class="mt-12 flex items-stretch justify-between gap-4"><span></span><a href="documentation/installation.html" class="group flex flex-col gap-1 px-4 py-3 rounded-lg border border-[rgb(var(--color-gray-200)/0.7)] dark:border-[rgb(var(--color-gray-800)/0.5)] hover:border-[rgb(var(--color-primary)/0.4)] dark:hover:border-[rgb(var(--color-primary-light)/0.3)] transition-colors no-underline text-right ml-auto"><span class="text-xs text-[rgb(var(--color-gray-500))] dark:text-[rgb(var(--color-gray-400))]">Next →</span><span class="text-sm font-medium text-[rgb(var(--color-gray-700))] dark:text-[rgb(var(--color-gray-300))] group-hover:text-[rgb(var(--color-primary-ink))] dark:group-hover:text-[rgb(var(--color-primary-light))] transition-colors">Installation</span></a></nav><div class="mt-16 mb-8 flex items-center justify-between border-t border-[rgb(var(--color-gray-200)/0.7)] dark:border-[rgb(var(--color-gray-800)/0.5)] pt-6 text-xs text-[rgb(var(--color-gray-500))] dark:text-[rgb(var(--color-gray-400))]"><a href="https://sourcey.com" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1.5 hover:text-[rgb(var(--color-gray-600))] dark:hover:text-[rgb(var(--color-gray-300))] transition-colors">Built with<img src="https://sourcey.com/sourcey-logo.png" alt="Sourcey" class="h-4 w-4"/></a><div class="flex items-center gap-4"><a href="https://day.js.org" target="_blank" rel="noopener noreferrer" aria-label="day.js.org" class="hover:text-[rgb(var(--color-gray-600))] dark:hover:text-[rgb(var(--color-gray-300))] transition-colors">day.js.org</a><a href="https://github.com/iamkun/dayjs" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="hover:text-[rgb(var(--color-gray-600))] dark:hover:text-[rgb(var(--color-gray-300))] transition-colors">GitHub</a></div></div></div></div></main></div><div id="search-dialog" role="dialog" aria-label="Search"><div class="search-dialog-inner"><div class="search-input-row"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="search-input-icon"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd"></path></svg><input id="search-input" type="text" placeholder="Search docs..." autocomplete="off" spellcheck="false"/></div><div id="search-results"></div><div class="search-footer"><span class="search-footer-hint"><kbd>↑↓</kbd> navigate</span><span class="search-footer-hint"><kbd>↵</kbd> select</span><span class="search-footer-hint"><kbd>esc</kbd> close</span></div></div></div></div><script src="sourcey.js" defer></script></body></html>