A simple yet configurable date picker and date range picker component for Vue 2.x apps.

Date _Time

Documentation

npm-version license

中文 README

v2-datepicker

A simple datepicker component based Vue 2.x.

Installation

npm:

npm i --save v2-datepicker 

or yarn

yarn add  v2-datepicker 

Get Started

import Vue from 'vue'; import 'v2-datepicker/lib/index.css';   // v2 need to improt css import V2Datepicker from 'v2-datepicker';  Vue.use(V2Datepicker) 
// basic <v2-datepicker v-model="val"></v2-datepicker> <v2-datepicker-range v-model="val2"></v2-datepicker-range>  //setting <v2-datepicker-range v-model="val" lang="en" format="yyyy-MM-DD" :picker-options="pickerOptions"></v2-datepicker-range> <v2-datepicker v-model="val2" format="yyyy-MM-DD" :picker-options="pickerOptions2"></v2-datepicker>  export default {     data () {         return {             pickerOptions: {                     shortcuts: [{                         text: 'Latest Week',                         onClick (picker) {                             const end = new Date();                             const start = new Date();                             start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);                             picker.$emit('pick', [start, end]);                         }                     }, {                         text: 'Latest Month',                         onClick (picker) {                             const end = new Date();                             const start = new Date();                             start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);                             picker.$emit('pick', [start, end]);                         }                     }, {                         text: 'Latest Three Month',                         onClick (picker) {                             const end = new Date();                             const start = new Date();                             start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);                             picker.$emit('pick', [start, end]);                         }                     }]                 },             pickerOptions2: {                 shortcuts: [{                     text: 'Today',                     onClick (picker) {                         picker.$emit('pick', new Date());                     }                 }, {                     text: 'Yesterday',                     onClick (picker) {                         const date = new Date();                         date.setTime(date.getTime() - 3600 * 1000 * 24);                         picker.$emit('pick', date);                     }                 }, {                     text: 'A week ago',                     onClick (picker) {                         const date = new Date();                         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);                         picker.$emit('pick', date);                     }                 }]             }         }     } } 

More demo to visit here.

On Demand Import

This feature just apply to v2

You need to install babel-plugin-on-demand-import:

npm i babel-plugin-on-demand-import -D 

Then add it to your .babelrc:

// v2 {     // ...     "plugins": [         ["on-demand-import" {             "libraryName": "v2-datepicker"         }]     ] }  // v3 {     // ...     "plugins": [         ["on-demand-import" {             "libraryName": "v2-datepicker",             "libraryName": "lib/components"         }]     ] } 
// Only import DatePicker component import { DatePicker } from 'v2-datepicker'; Vue.use(DatePicker);  <v2-datepicker v-model="val"></v2-datepicker>  // Only import DatePickerRange component import { DatePickerRange } from 'v2-datepicker'; Vue.use(DatePickerRange);  <v2-datepicker-range v-model="val2"></v2-datepicker-range> 

Custom Locales

The components native supports only two languages: cn(chinese) and en(english) since v3.1.0, if you want to custom locale, do it by customLocals prop:

<template>   <v2-datepicker format="MM/DD/YYYY" :lang="lang" :customLocals="locals" v-model="date"></v2-datepicker> </template>  // js import locals from 'path/to/your/locals' export default {   data () {     return {       lang: 'it',       locales     }   } }  // locales.js export default {   'it': {     'months': {         'original': ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],         'abbr': ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']     },     'days': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']   },   'lang-key': {      'months': {         'original': ['value1', 'value2', '...'],         'abbr': ['value1', 'value2', '...']      },      'days': ['value1', 'value2', '...']   } }

Available Props

The v2-datepicker component

Attribute Type Accepted Values Default Description
value Date anything accepted by new Date() - default date of the date-picker
lang String cn(chinese)/en(english) cn set local language of the date-picker
customLocals Object - {} custom locale
format String year yyyy/YYYY, month MM, day dd yyyy/MM/dd format of the displayed value in the span box
placeholder String - 选择日期/Choosing date... placeholder text
disabled Boolean - false disabled date-picker
picker-options Object - {} additional options, check the table below
render-row Number 6/7 7 render rows of datepicker
default-value Date anything accepted by new Date() - default date of the calendar

The v2-daterange-picker component

Attribute Type Accepted Values Default Description
value Array anything accepted by new Date() - default date of the daterange-picker
lang String cn(chinese)/en(english) cn set local language of the daterange-picker
customLocals Object - {} custom locale
format String year yyyy/YYYY, month MM, day dd yyyy/MM/dd format of the displayed value in the span box
placeholder String - 开始时间-结束时间/Choosing date range... placeholder text
disabled Boolean - false disabled daterange-picker
range-separator String - '-' range separator
unlink-panels Boolean - false unlink two date-panels in range-picker
picker-options Object - {} additional options, check the table below
default-value Date anything accepted by new Date() - default date of the calendar

Picker Options

Attribute Type Accepted Values Default Description
shortcuts Object[] - - a { text, onClick } object array to set shortcut options, check the table below
disabledDate Function - - a function determining if a date is disabled with that date as its parameter. Should return a Boolean

shortcuts

Attribute Type Accepted Values Default Description
text String - - title of the shortcut
onClick Function - - callback function, triggers when the shortcut is clicked

Event

Event Name Description Parameters
change triggers when the selected value changes component's binding value

Development

git clone [email protected]github.com:dwqs/v2-datepicker.git  cd v2-datepicker  npm i  npm start

LICENSE

MIT


You May Also Like