1.0.2 • Published 3 years ago
vs-datepicker v1.0.2
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 vs-datepicker
yarn add 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 'vs-datepicker';
export default {
components: {
VsDatepicker,
},
};
</script>
🌎 CDN
<script src="https://unpkg.com/vs-datepicker@1.0.1/dist/vs-datepicker.min.js"></script>
<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 '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 'vs-datepicker'
& add incomponent:{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 |
max | String | - | Max date allowed. |
min | String | - | Min date allowed |
id | String | - | Id added to datepicker component |
placeholder | String | - | Placeholder to datepicker input box |
lang | Object | - | Override the default locale |
NOTE
Example for maxdate
<vs-datepicker
label="Date"
id="deliveryDate"
v-model="form.date"
placeholder="DD-MM-YYYY"
format="DD-MM-YYYY"
:max="maxDate"
></vs-datepicker>
<script>
export default {
date() {
return {
maxDate: new Date().toISOString().substring(0, 10), // Max date -> Today
};
},
};
</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