Vue Simple Datepicker

🗃 A simple vue detepicker. Perfect for all your datepicker scenarios.

A light weight vue datepicker plugin.

📺 Live Demo

Code Sandbox Demo: Link Code Sandbox: Link

🛠 Install

npm i @vuesimple/vs-datepicker

🚀 Usage

<template>
  <vs-datepicker
    label="Date"
    id="deliveryDate"
    v-model="form.date"
    placeholder="DD-MM-YYYY"
    format="DD-MM-YYYY"
  ></vs-datepicker>
</template>

<script>
  import VsDatepicker from '@vuesimple/vs-datepicker';

  export default {
    components: {
      VsDatepicker,
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-datepicker@<version>/dist/vs-datepicker.min.js"></script>

// Main/Entry file
app.use(VsDatepicker.plugin);

<template>
  <vs-datepicker
    label="Date"
    id="deliveryDate"
    v-model="form.date"
    placeholder="DD-MM-YYYY"
    format="DD-MM-YYYY"
  ></vs-datepicker>
</template>

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-datepicker.js

  import Vue from 'vue';
  import VsDatepicker from '@vuesimple/vs-datepicker';
  
  Vue.component('vs-datepicker', VsDatepicker);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-datepicker', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <vs-datepicker
      label="Date"
      id="deliveryDate"
      v-model="form.date"
      placeholder="DD-MM-YYYY"
      format="DD-MM-YYYY"
    ></vs-datepicker>
  </template>

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsDatepicker from '@vuesimple/vs-datepicker' & add in component:{VsDatepicker} and use it within component, without globally installing in plugin folder.

⚙ Props

| Name | Type | Default | Description | | ------------- | ------------------------- | ------------ | -------------------------------------------- | ----- | ---- | ----- | ------ | ------------------------- | | type | date | datetime | year | month | time | week | date | Select the type of picker | | format | Token | MM-DD-YYYY | To set the date format. similar to moment.js | | value-type | Value-Type | 'date' | Data type of the binding value/v-model. | | range | Boolean | false | If true, pick the range date | | label | String | Date | Label to datepicker | | isError | Boolean | - | Highlight input box with red if error | | required | Boolean | - | show * with label | | disabled | Boolean | - | Disable datepicker | | disabled-date | Function | - | Disable dates in datepicker | | id | String | - | Id added to datepicker component | | placeholder | String | - | Placeholder to datepicker input box | | lang | Object | - | Override the default locale | | editable | Boolean | false | Whether the input is editable | | clearable | Boolean | false | If false, don't show the clear icon | | is-compact | Boolean | false | Applies compact style to datepicker |

NOTE Example for maxdate

<vs-datepicker
  label="Date"
  id="deliveryDate"
  v-model="form.date"
  placeholder="DD-MM-YYYY"
  format="DD-MM-YYYY"
  :disabled-date="disabledDate"
></vs-datepicker>

<script>
  export default {
    methods: {
      disabledDates(date) {
        return date < new Date('Your Min Date') || date > new Date('Your Max Date');
      },
    },
  };
</script>

🔥 Events

| Name | Description | | ------- | -------------------------------------- | | v-model | When the value changes | | change | When the value change(same as v-model) | | open | When panel opening | | close | When panel closing |

Token

| Unit | Token | Output | | -------------------------- | ----- | -------------------------------------- | | Year | YY | 70 71 ... 10 11 | | | YYYY | 1970 1971 ... 2010 2011 | | | Y | -1000 ...20 ... 1970 ... 9999 +10000 | | Month | M | 1 2 ... 11 12 | | | MM | 01 02 ... 11 12 | | | MMM | Jan Feb ... Nov Dec | | | MMMM | January February ... November December | | Day of Month | D | 1 2 ... 30 31 | | | DD | 01 02 ... 30 31 | | Day of Week | d | 0 1 ... 5 6 | | | dd | Su Mo ... Fr Sa | | | ddd | Sun Mon ... Fri Sat | | | dddd | Sunday Monday ... Friday Saturday | | AM/PM | A | AM PM | | | a | am pm | | Hour | H | 0 1 ... 22 23 | | | HH | 00 01 ... 22 23 | | | h | 1 2 ... 12 | | | hh | 01 02 ... 12 | | Minute | m | 0 1 ... 58 59 | | | mm | 00 01 ... 58 59 | | Second | s | 0 1 ... 58 59 | | | ss | 00 01 ... 58 59 | | Fractional Second | S | 0 1 ... 8 9 | | | SS | 00 01 ... 98 99 | | | SSS | 000 001 ... 998 999 | | Time Zone | Z | -07:00 -06:00 ... +06:00 +07:00 | | | ZZ | -0700 -0600 ... +0600 +0700 | | Week of Year | w | 1 2 ... 52 53 | | | ww | 01 02 ... 52 53 | | Unix Timestamp | X | 1360013296 | | Unix Millisecond Timestamp | x | 1360013296123 |

Value Type

| Value | Description | | ----------------- | -------------------------------------------------- | | 'date' | Returns a Date object | | 'timestamp' | Returns a timestamp number | | 'format' | Returns a string formatted using pattern of format | | token(MM/DD/YYYY) | Returns a string formatted using this pattern |

Full lang config

{
  // the locale of formatting and parsing function
  formatLocale: {
    // MMMM
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    // MMM
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    // dddd
    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    // ddd
    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    // dd
    weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    // first day of week
    firstDayOfWeek: 0,
    // first week contains January 1st.
    firstWeekContainsDate: 1,
  },
}

Original credits to Vue2 Datepicker