Vue Libraries for Adding Color and Date Pickers

John Au-Yeung

Follow

May 22, 2020 · 4 min read

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at some simple Vue packages for adding color and date pickers to our Vue apps.

vue-color

The vue-color package is a great color picker widgets to let users pick a color from a palette without creating all of that from scratch.

We can install it by running:

npm install vue-color

to install the Node package or include it as a script tag by writing:

<script src="vue-color.min.js"></script>

Then we can use it as follows:

<template>
  <div id="app">
    <photoshop-picker v-model="colors"/>
  </div>
</template><script>
import { Photoshop } from "vue-color";export default {
  name: "App",
  components: {
    "photoshop-picker": Photoshop
  },
  data() {
    return {
      colors: {
        hex: "#194d33",
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 }
      }
    };
  }
};
</script>

In the code above, we imported the Photoshop color picker, which looks similar to the color picker dialog in Photoshop.

It has a color input, boxes are entering color values, a box for comparing the current color to another color.

In the data method, we returned an object with the properties to preset the color for hex , hsl , hsv and rgba values.

It also has many other color picker styles available, including Material Design style, compact style, swatch, slider, sketch, and Chrome styles.

For instance, we can add them all with the following code:

<template>
  <div id="app">
    <photoshop-picker v-model="colors"/>
    <material-picker v-model="colors"/>
    <compact-picker v-model="colors"/>
    <swatches-picker v-model="colors"/>
    <slider-picker v-model="colors"/>
    <sketch-picker v-model="colors"/>
    <chrome-picker v-model="colors"/>
  </div>
</template><script>
import {
  Photoshop,
  Material,
  Compact,
  Swatches,
  Slider,
  Sketch,
  Chrome
} from "vue-color";export default {
  name: "App",
  components: {
    "material-picker": Material,
    "compact-picker": Compact,
    "swatches-picker": Swatches,
    "slider-picker": Slider,
    "sketch-picker": Sketch,
    "chrome-picker": Chrome,
    "photoshop-picker": Photoshop
  },
  data() {
    return {
      colors: {
        hex: "#194d33",
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 }
      }
    };
  }
};
</script>

Then we get color pickers that fit the Material Design spec, a slider color picker, a Chrome-style color picker, etc.

vuejs-datepicker

The vuejs-datepicker package is a useful Vue date picker control. To install the Node package, we run:

npm install vuejs-datepicker --save

We can also include the CDN version with a script tag by writing:

<script src="https://unpkg.com/vuejs-datepicker"></script>

in our HTML code.

Then we can use it as follows:

<template>
  <div id="app">
    <datepicker v-model="date"></datepicker>
    <p>{{date}}</p>
  </div>
</template><script>
import Datepicker from "vuejs-datepicker";export default {
  name: "App",
  components: {
    Datepicker
  },
  data() {
    return {
      date: new Date(2020, 0, 1)
    };
  }
};
</script>

In the code above, we imported the Datepicker component from the vuejs-datepicker package and registered it in our component by including it in the component object.

Then we included the datepicker component and used v-model to ad 2-ways binding between the date picker and the date model.

We should then see a date picker input on the screen where we can select the date. The date picker should have the date January 1, 2020 set. The p tag displays the same date.

Then when we select the date, we’ll see that the input and the p element below it have the date updated.

It’s very configurable. We can pass in many options as props. Some of them include:

• value — date or string for the date value
• name — name attribute for the input
• id — id attribute
• format — string for the date format
• full-month-name — Boolean to indicate if we want to show the full month name
• language — language for date
• calendar-class , input-class , wrapper-class — class names for various parts of the date picker
• inline — boolean to indicate whether we want to date picker to be inline
• clear-button — boolean to indicate whether we want to show a clear button
• clear-button-icon — icon for clear button
• calendar-button — boolean to indicate whether we want to show a calendar button
• calendar-button-icon — icon for the calendar button
• … and many more as shown on https://github.com/charliekassel/vuejs-datepicker

Conclusion

The vue-color package lets us add color pickers in various styles with a few lines of code.

Styles include Chrome style, Material Design style, etc.

The vuejs-datepicker package lets us add a very configurable date picker which we can add to let users select dates.