Welcome folks today in this blog post we will be looking at a litepie date picker component library in vue.js using tailwind css. All the full source code of the application is shown below.
Installation
Install via npm
|
1 |
$ npm install -S litepie-datepicker |
Install via yarn
|
1 |
$ yarn add litepie-datepicker |
How it works
Setup globally components
|
1 2 3 4 5 6 7 |
<span class="token comment">// main.js</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'@/App.vue'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> LitepieDatepicker <span class="token keyword">from</span> <span class="token string">'litepie-datepicker'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>LitepieDatepicker<span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
|
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 |
<span class="token comment"><!-- SFC file --></span> <span class="token tag"><span class="token punctuation"><</span>template<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>litepie-datepicker <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dateValue<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>litepie-datepicker<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>template<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> LitepieDatepicker <span class="token keyword">from</span> <span class="token string">'litepie-datepicker'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components<span class="token operator">:</span><span class="token punctuation">{</span> LitepieDatepicker <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> dateValue <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> dateValue <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> |
Tailwind CSS Configuration
|
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 |
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'tailwindcss/colors'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> purge<span class="token operator">:</span> <span class="token punctuation">[</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./node_modules/litepie-datepicker/**/*.js'</span><span class="token punctuation">)</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> darkMode<span class="token operator">:</span> <span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token comment">// or 'media' or 'class'</span> theme<span class="token operator">:</span> <span class="token punctuation">{</span> extend<span class="token operator">:</span> <span class="token punctuation">{</span> colors<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// Change with you want it</span> <span class="token string">'litepie-primary'</span><span class="token operator">:</span> colors<span class="token punctuation">.</span>lightBlue<span class="token punctuation">,</span> <span class="token comment">// color system for light mode</span> <span class="token string">'litepie-secondary'</span><span class="token operator">:</span> colors<span class="token punctuation">.</span>coolGray <span class="token comment">// color system for dark mode</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> variants<span class="token operator">:</span> <span class="token punctuation">{</span> extend<span class="token operator">:</span> <span class="token punctuation">{</span> cursor<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'disabled'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> textOpacity<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'disabled'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> textColor<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'disabled'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Theming options
It supports two theme colors namely
dark modelight mode
Overlay Datepicker
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div class="flex"> <litepie-datepicker overlay v-model="dateValue" ></litepie-datepicker> </div> </template> <script> import { ref } from 'vue'; export default { name: 'MyComponent', setup() { const dateValue = ref([]); return { dateValue }; } }; </script> |
Now if you open this vue file you will see a shadow overlay on the datepicker
Separators Multiple Dates as Range
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div class="flex"> <litepie-datepicker separator=" to " v-model="dateValue" ></litepie-datepicker> </div> </template> <script> import { ref } from 'vue'; export default { name: 'MyComponent', setup() { const dateValue = ref([]); return { dateValue }; } }; </script> |
Disabled Date Example
|
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 |
<template> <div class="flex"> <litepie-datepicker :disable-date="dDate" v-model="dateValue" ></litepie-datepicker> </div> </template> <script> import { ref } from 'vue'; export default { name: 'MyComponent', setup() { const dateValue = ref([]); const dDate = (date) => { return date < new Date() || date > new Date(2023, 0, 8); } return { dateValue, dDate }; } }; </script> |
Official Website
