Change Theme of Flatpickr in Vue Js and Jquery

In this article we will know about how we can change theme of Flatpickr in vue Js and jquery .Here you can understand how easily you can change theme of flatpickr in Vue Js and jquery very easy method is written in this blog Before changing theme of Flatpickr in vue js and jquery.Let’s know about what is Flatpickr

What is Flatpickr?

Flatpickr is a lightweight and powerful datetime picker.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.

To get the things done we are going to follow the below steps,Please follow each and every steps so that you can achieve your goal quickly and get your things done.

• Component Installation
• Creating the template
• Adding the required field

Step:1 Flatpickr Installation

First, you need to install the Flatpickr into your Vue project, by using the below command

Installation

# yarn yarn add vue-flatpickr-component 
# npm npm install vue-flatpickr-component

After that you can use that picker in your project.

Step:2 Paste the code in your template

<template>   
   <div>
        <flat-pickr v-model="date"></flat-pickr>
   <div> 
</template>

<script>

import flatPickr from 'vue-flatpickr-component'; 
  import 'flatpickr/dist/flatpickr.css';  
    
export default {
   data () {
    return {
         date: null,
     }     
   },
   components: { 
      flatPickr     
   }   
  }
</script>

There are many type of theme available in the flatpicker plugin after the installation of you can use any of then in your project,

If you are using flatpicker in your vue project then you need to follow steps 1.

Step:3 Add the required files

require("flatpickr/dist/themes/default.css");
require("flatpickr/dist/themes/dark.css"); 
require("flatpickr/dist/themes/material_blue.css"); 
require("flatpickr/dist/themes/material_green.css"); 
require("flatpickr/dist/themes/material_red.css");
require("flatpickr/dist/themes/material_orange.css"); 
require("flatpickr/dist/themes/airbnd.css");
require("flatpickr/dist/themes/confetti.css"); 

You simply need to update your CSS in the above code in your project and if you are using Flatpickr in your jquery project then you need to follow step 4.

Step:4 Add the stylesheet

Simple Add that stylsheet in you jquery project after that it will works as per as your expections,

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/default.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_green.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_red.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_orange.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnd.css"> 

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/confetti.css"> 

Now you can use these themes as per your requirement I hope it will help you.