<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Vue 3 Datepicker"><span class="site-name can-hide">Vue 3 Datepicker</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/Vuepic/vue3-date-time-picker" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/Vuepic/vue3-date-time-picker/releases" rel="noopener noreferrer" target="_blank" aria-label="Changelog"><!--[--><!--]--> Changelog <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/Vuepic/vue3-date-time-picker" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/Vuepic/vue3-date-time-picker/releases" rel="noopener noreferrer" target="_blank" aria-label="Changelog"><!--[--><!--]--> Changelog <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">Getting Started</p><ul class=""><li><!--[--><a href="/installation/" class="nav-link sidebar-item" aria-label="Installation"><!--[--><!--]--> Installation <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">API</p><ul class=""><li><!--[--><a href="/api/props/" class="nav-link sidebar-item" aria-label="Props"><!--[--><!--]--> Props <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/api/components/" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="Components"><!--[--><!--]--> Components <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/api/components/#monthyearcomponent" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="monthYearComponent"><!--[--><!--]--> monthYearComponent <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/api/components/#timepickercomponent" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="timePickerComponent"><!--[--><!--]--> timePickerComponent <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/api/components/#actionrowcomponent" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="actionRowComponent"><!--[--><!--]--> actionRowComponent <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/api/components/#customprops" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="customProps"><!--[--><!--]--> customProps <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/api/slots/" class="nav-link sidebar-item" aria-label="Slots"><!--[--><!--]--> Slots <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/api/events/" class="nav-link sidebar-item" aria-label="Events"><!--[--><!--]--> Events <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/api/methods/" class="nav-link sidebar-item" aria-label="Methods"><!--[--><!--]--> Methods <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">Customization</p><ul class=""><li><!--[--><a href="/customization/theming/" class="nav-link sidebar-item" aria-label="Theming"><!--[--><!--]--> Theming <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/customization/scss/" class="nav-link sidebar-item" aria-label="Scss"><!--[--><!--]--> Scss <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="components" tabindex="-1"><a class="header-anchor" href="#components" aria-hidden="true">#</a> Components</h1><p>Customize the datepicker with your custom components</p><div class="custom-container warning"><p class="custom-container-title">WARNING</p><p><strong>Make sure to properly read the documentation and check the examples on how to pass and configure a custom component. Wrong implementation may result in errors</strong></p></div><div class="custom-container tip"><p class="custom-container-title">TIP</p><p><strong>You can use <code>css</code> variables inside custom components if you need to style for the theme</strong></p></div><h2 id="monthyearcomponent" tabindex="-1"><a class="header-anchor" href="#monthyearcomponent" aria-hidden="true">#</a> monthYearComponent</h2><p>Create and use a custom component in the header for month/year select</p><div class="demo-wrap"><div class="dp__main dp__theme_dark"><div id="dp__input_useMonthYearCustom"><!----><div class="dp__input_wrap"><input class="dp__pointer dp__input dp__input_icon_pad" readonly value><!----><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" class="dp__icon dp__input_icon dp__input_icons"><path d="M29.333 8c0-2.208-1.792-4-4-4h-18.667c-2.208 0-4 1.792-4 4v18.667c0 2.208 1.792 4 4 4h18.667c2.208 0 4-1.792 4-4v-18.667zM26.667 8v18.667c0 0.736-0.597 1.333-1.333 1.333 0 0-18.667 0-18.667 0-0.736 0-1.333-0.597-1.333-1.333 0 0 0-18.667 0-18.667 0-0.736 0.597-1.333 1.333-1.333 0 0 18.667 0 18.667 0 0.736 0 1.333 0.597 1.333 1.333z"></path><path d="M20 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"></path><path d="M9.333 2.667v5.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-5.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333z"></path><path d="M4 14.667h24c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-24c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path></svg><!----><!----></div></div><!--teleport start--><!--teleport end--></div></div><p>The component will receive the following <code>props</code>:</p><ul><li><code>months</code>: <code>{ value: number; text: string }[]</code> -> value: <code>0-11</code>, text: name of the month</li><li><code>years</code>: <code>{ value: number; text: string }[]</code> -> generated array of years based on provided range, text and value are the same</li><li><code>filters</code>: <a href="/api/props/#filters" class="">filters prop</a></li><li><code>monthPicker</code>: <a href="/api/props/#monthpicker" class="">monthPicker prop</a></li><li><code>month</code>: <code>number</code> -> This is the value of the selected month</li><li><code>year</code> : <code>number</code> -> This is the value of the selected year</li><li><code>customProps</code>: <code>Record<string, unknown></code> -> Your custom props</li></ul><p><strong>Important:</strong> To update the month and the year value make sure to <code>emit</code> the following:</p><ul><li>Month <ul><li>Event: <code>update:month</code></li><li>Value: <code>number</code></li></ul></li><li>Year <ul><li>Event: <code>update:year</code></li><li>Value: <code>number</code></li></ul></li></ul><details class="custom-container details"><summary>Code Example</summary><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">Parent Component</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">MonthYearCustom</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
0 commit comments