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

 $ npm install -S litepie-datepicker 

 $ yarn add litepie-datepicker 

How it works

// main.js
import { createApp } from 'vue';
import App from '@/App.vue';
import LitepieDatepicker from 'litepie-datepicker';   const app = createApp(App);

app.use(LitepieDatepicker);
app.mount('#app');

<!-- SFC file -->
<template>
  <div class="flex">
    <litepie-datepicker
      v-model="dateValue"
    ></litepie-datepicker>
  </div>
</template>

<script>
  import { ref } from 'vue';
  import LitepieDatepicker from 'litepie-datepicker';
  
  export default {
    components:{
      LitepieDatepicker
    },
    setup() {
      const dateValue = ref([]);
      
      return {
        dateValue
      };
    }
  }
</script>

Tailwind CSS Configuration

const path = require('path');
const colors = require('tailwindcss/colors');

module.exports = {
  purge: [
    path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js')
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        // Change with you want it
        'litepie-primary': colors.lightBlue, // color system for light mode
        'litepie-secondary': colors.coolGray // color system for dark mode
      }
    }
  },
  variants: {
    extend: {
      cursor: ['disabled'],
      textOpacity: ['disabled'],
      textColor: ['disabled']
    }
  },
  plugins: []
};

Theming options

Overlay Datepicker

<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

<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

<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