v2-datepicker

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 87 Open GitHub ↗

A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![npm-version](https://img.shields.io/npm/v/v2-datepicker.svg) ![license](https://img.shields.io/npm/l/v2-datepicker.svg)

[中文 README](https://github.com/dwqs/v2-datepicker/blob/master/README_CN.md)
# 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](https://dwqs.github.io/v2-datepicker).

## On Demand Import
> This feature just apply to v2

You need to install [babel-plugin-on-demand-import](https://github.com/dwqs/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:

```js
<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

## Development

```js
git clone git@github.com:dwqs/v2-datepicker.git

cd v2-datepicker

npm i

npm start
```

## LICENSE
MIT

v2-datepicker

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README