Vue.js Litepie Datepicker Component Library Using Tailwind CSS Crash Course With Examples Full Tutorial For Beginners

Vue.js Litepie Datepicker Component Library Using Tailwind CSS Crash Course With Examples Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

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

 $ npm install -S litepie-datepicker 

Install via yarn

 $ yarn add litepie-datepicker 

 

 

How it works

Setup globally components

// 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: []
};

 

See also  Vue.js TinyMCE Library to Build Wordpress Wysiwyg Rich HTML Text Editor in Browser Using Javascript Full Project For Beginners

 

Theming options

It supports two theme colors namely
dark mode
light mode

 

 

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>

 

See also  Build a Vue.js Date Time Manipulation Calculator in Browser Using date-fns date utility Library in Javascript Full Project For Beginners

 

 

 

Official Website

 

Leave a Reply