Vue Libraries for Adding Color and Date Pickers

John Au-Yeung
May 22, 2020 · 4 min read
Photo by Robert Katzki on Unsplash

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

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

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
Photo by Priscilla Du Preez on Unsplash

Conclusion

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.

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store