A Simple Calendar Single Date Picker For Vue.js

Vue single date picker is a very simple data picker component where users can select a date from a clean calendar view.

How to make use of it:

Install and download:

# NPM
$ npm install vue-single-date-picker --save

1. Import the single date picker component after installation.

import SingleDatePicker from 'vue-single-date-picker';
@import '~vue-single-date-picker/dist/vue-single-date-picker.css';

2. Register the component.

export default {
  components: {
    SingleDatePicker
  }
}

3. Create a date picker component in your template.

<SingleDatePicker />

Props

Propsargumentsremarks
date{ year: <Number>, month: <Number>, date: <Number> }E.g. 1 Jan 2020
{year: 2020, month: 0, date: 1}
first-day-of-weekfirstDayOfWeek: <Number>(0: Sunday … 6: Saturday)
For E.g. start the week on Monday
:first-day-of-week=”1″

Events

eventsargumentsremarks
@selectDate{ year: <Number>, month: <Number>, date: <Number> }E.g. 1 Jan 2020
{year: 2020, month: 0, date: 1}

Read More – 

Creating Calendar Icons Using Pure HTML and CSS | cal.css
Simple Animated Event Calendar in jQuery Plugin


See Demo And Download

Official Website(jiayingy): Click Here

This superior jQuery/javascript plugin is developed by jiayingy. For extra Advanced Usage, please go to the official website.

Share