CINXE.COM

<!doctype html><html class=no-js><head lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1"><meta http-equiv=x-ua-compatible content="IE=10"><title>Introduction</title><meta name=generator content="Hugo 0.79.1"><meta name=description content="A lightweight and powerful datetimepicker"><link rel=canonical href=https://flatpickr.js.org/><meta name=author content="chmln"><meta property="og:url" content="https://flatpickr.js.org/"><meta property="og:title" content="flatpickr"><meta property="og:image" content="https://flatpickr.js.org/images/logo.png"><meta name=apple-mobile-web-app-title content="flatpickr"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><link rel="shortcut icon" type=image/x-icon href=https://flatpickr.js.org/images/logo.png><link rel=icon type=image/x-icon href=https://flatpickr.js.org/images/logo.png><style>@font-face{font-family:icon;src:url(https://flatpickr.js.org/fonts/icon.eot);src:url(https://flatpickr.js.org/fonts/icon.eot)format('embedded-opentype'),url(https://flatpickr.js.org/fonts/icon.woff)format('woff'),url(https://flatpickr.js.org/fonts/icon.ttf)format('truetype'),url(https://flatpickr.js.org/fonts/icon.svg)format('svg');font-weight:400;font-style:normal}</style><link rel=stylesheet href=https://flatpickr.js.org/stylesheets/application.css><link rel=stylesheet href=https://flatpickr.js.org/stylesheets/temporary.css><link rel=stylesheet href=https://flatpickr.js.org/stylesheets/palettes.css><link rel=stylesheet href="//fonts.googleapis.com/css?family=Libre%20Franklin:400,700|Roboto+Mono"><style>body,input{font-family:libre franklin,Helvetica,Arial,sans-serif}pre,code{font-family:roboto mono,courier new,courier,monospace}</style><link rel=stylesheet href=https://flatpickr.js.org/site.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/confirmDate/confirmDate.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css><script src=https://flatpickr.js.org/javascripts/modernizr.js></script><link href=https://flatpickr.js.org/index.xml rel=alternate type=application/rss+xml title=flatpickr><link href=https://flatpickr.js.org/index.xml rel=feed type=application/rss+xml title=flatpickr></head><body class="palette-primary-blue palette-accent-light-blue"><div class=backdrop><div class=backdrop-paper></div></div><input class=toggle type=checkbox id=toggle-drawer> <input class=toggle type=checkbox id=toggle-search> <label class="toggle-button overlay" for=toggle-drawer></label><header class=header><nav aria-label=Header><div class="bar default"><div class="button button-menu" role=button aria-label=Menu><label class="toggle-button icon icon-menu" for=toggle-drawer><span></span></label></div><div class=stretch><div class=title>Introduction</div></div><div class="button button-github" role=button aria-label=GitHub><a href=https://github.com/flatpickr/flatpickr title="@flatpickr/flatpickr on GitHub" target=_blank class="toggle-button icon icon-github"></a></div></div><div class="bar search"><div class="button button-close" role=button aria-label=Close><label class="toggle-button icon icon-back" for=toggle-search></label></div><div class=stretch><div class=field><input class=query type=text placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck></div></div><div class="button button-reset" role=button aria-label=Search><button class="toggle-button icon icon-close" id=reset-search></button></div></div></nav></header><main class=main><div class=drawer><nav aria-label=Navigation><a href=https://github.com/flatpickr/flatpickr class=project><div class=banner><div class=logo><img src=https://flatpickr.js.org/images/logo.png></div><div class=name><strong>flatpickr <span class=version>v4</span></strong><br>flatpickr/flatpickr</div></div></a><div class=scrollable><div class=wrapper><ul class=repo><li class=repo-download><a href=https://github.com/flatpickr/flatpickr/archive/master.zip target=_blank title=Download data-action=download><i class="icon icon-download"></i>Download</a></li><li class=repo-stars><a href=https://github.com/flatpickr/flatpickr/stargazers target=_blank title=Stargazers data-action=star><i class="icon icon-star"></i>Stars <span class=count>–</span></a></li></ul><hr><div class=toc><ul><li><a class=current title=Introduction href=https://flatpickr.js.org/>Introduction</a><ul id=scrollspy></ul></li><li><a title="Getting Started" href=https://flatpickr.js.org/getting-started/>Getting Started</a></li><li><a title=Examples href=https://flatpickr.js.org/examples/>Examples</a></li><li><a title="The Flatpickr Instance" href=https://flatpickr.js.org/instance-methods-properties-elements/>The Flatpickr Instance</a></li><li><a title="Events & Hooks" href=https://flatpickr.js.org/events/>Events & Hooks</a></li><li><a title="Config Options" href=https://flatpickr.js.org/options/>Config Options</a></li><li><a title="Formatting Tokens" href=https://flatpickr.js.org/formatting/>Formatting Tokens</a></li><li><a title=Localization href=https://flatpickr.js.org/localization/>Localization</a></li><li><a title=Plugins href=https://flatpickr.js.org/plugins/>Plugins</a></li><li><a title=Themes href=https://flatpickr.js.org/themes/>Themes</a></li><li><a title="Mobile Support" href=https://flatpickr.js.org/mobile-support/>Mobile Support</a></li><li><a title=IE9 href=https://flatpickr.js.org/ie9/>IE9</a></li><li><a title="Updating from v2" href=https://flatpickr.js.org/updating-from-v2/>Updating from v2</a></li></ul><hr><span class=section>The author</span><ul><li><a href=https://github.com/flatpickr/flatpickr target=_blank title="@flatpickr/flatpickr on GitHub">@flatpickr/flatpickr on GitHub</a></li></ul></div></div></div></nav></div><article class=article><div class=wrapper><h1>Introduction</h1><h2 id=introduction>Introduction</h2><p><code>flatpickr</code> is a lightweight and powerful datetime picker.</p><p>Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment.</p><p>This “lean” philosophy translates to less size and better performance, with a bonus of not having to load 8 libraries for a calendar.</p><p>Dive right into it in the next section.</p><aside class=copyright role=note>© 2020 Released under the MIT license</aside><footer class=footer><nav class=pagination aria-label=Footer><div class=previous></div><div class=next><a href=https://flatpickr.js.org/getting-started/ title="Getting Started"><span class=direction>Next</span><div class=page><div class=stretch><div class=title>Getting Started</div></div><div class="button button-next" role=button aria-label=Next><i class="icon icon-forward"></i></div></div></a></div></nav></footer></div></article><div class=results role=status aria-live=polite><div class=scrollable><div class=wrapper><div class=meta></div><div class=list></div></div></div></div></main><script>var base_url='https:\/\/flatpickr.js.org\/';var repo_id='flatpickr\/flatpickr';</script><script src=https://flatpickr.js.org/javascripts/application.js></script><script src=https://flatpickr.js.org/init.js></script><script src=https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.js></script><script src=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/confirmDate/confirmDate.js></script><script src=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/weekSelect/weekSelect.js></script><script src=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js></script><script src=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/minMaxTimePlugin.js></script><script src=https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js></script><script src=https://flatpickr.js.org/flatpickr.js></script><script src=https://flatpickr.js.org/themer.js></script><script>var headers=document.getElementsByTagName("h2");var scrollspy=document.getElementById('scrollspy');if(scrollspy){if(headers.length>0){for(var i=0;i<headers.length;i++){var li=document.createElement("li");li.setAttribute("class","anchor");var a=document.createElement("a");a.setAttribute("href","#"+headers[i].id);a.setAttribute("title",headers[i].innerHTML);a.innerHTML=headers[i].innerHTML;li.appendChild(a) scrollspy.appendChild(li);}}else{scrollspy.parentElement.removeChild(scrollspy)} var headers=document.querySelectorAll("h1, h2, h3, h4, h5, h6");for(var i=0;i<headers.length;i++){var a=document.createElement("a");a.setAttribute("class","headerlink");a.setAttribute("href","#"+headers[i].id);a.setAttribute("title","Permanent link") a.innerHTML="#";headers[i].appendChild(a);}}</script></body></html>