https://github.com/weifeiyue/vue-datepicker-local

A Beautiful Datepicker Component For Vue2
https://github.com/weifeiyue/vue-datepicker-local

component datepicker javascript vue

Last synced: 3 months ago
JSON representation

A Beautiful Datepicker Component For Vue2

• Host: GitHub
• URL: https://github.com/weifeiyue/vue-datepicker-local
• Owner: weifeiyue
• License: mit
• Created: 2017-10-10T07:55:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:54:26.000Z (almost 2 years ago)
• Last Synced: 2024-06-23T04:57:25.020Z (5 months ago)
• Topics: component, datepicker, javascript, vue
• Language: Vue
• Homepage: https://weifeiyue.github.io/vue-datepicker-local/
• Size: 1.13 MB
• Stars: 297
• Watchers: 11
• Forks: 84
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-datepicker-local

### A Beautiful Datepicker Component For Vue2

* Lightweight (less than 5kb minified and gzipped)

* Only dependencies Vue

* Beautiful!

![image](https://raw.githubusercontent.com/weifeiyue/vue-datepicker-local/gh-pages/preview.png)

## Demo

[https://weifeiyue.github.io/vue-datepicker-local/](https://weifeiyue.github.io/vue-datepicker-local/)

## Usage

### Install

```bash

$ npm install vue-datepicker-local

```

### ES6

```html

  

import VueDatepickerLocal from 'vue-datepicker-local'

export default {

  components: {

    VueDatepickerLocal

  },

  data () {

    return {

      time: new Date()

    }

  }

}

```

### Browser globals

The `dist` folder contains `vue-datepicker-local.js` and `vue-datepicker-local.css`.

```html

  

  


    

  

  

  

  

    new Vue({

      el: "#app",

      data: {

        time: new Date()

      }

    })

  


```

### Props

| Prop           | Description                                      | Type       | Default            |

|:---------------|:-------------------------------------------------|:-----------|:-------------------|

| v-model        | dates to be manipulated                          | Date/Array | --                 |

| name           | name for input                                   | String     | --                 |

| type           | type for input (inline/normal)                   | String     | normal             |

| inputClass     | custom class name for input                      | String     | --                 |

| popupClass     | custom class name for popup                      | String     | --                 |

| disabled       | determine whether the DatePicker is disabled     | Boolean    | false              |

| clearable      | clear the date                                   | Boolean    | false              |

| rangeSeparator | range separator                                  | String     | "~"                |

| format         | to set the date format                           | String     | "YYYY-MM-DD"       |

| local          | the local of the DatePicker                      | Object     | {
dow: 1, // Monday is the first day of the week
hourTip: '选择小时', // tip of select hour
minuteTip: '选择分钟', // tip of select minute
secondTip: '选择秒数', // tip of select second
yearSuffix: '年', // format of head
monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), // months of head
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), // months of panel
weeks: '一_二_三_四_五_六_日'.split('_'), // weeks
 cancelTip: '取消', // default text for cancel button 
, submitTip: '提交' // default text for submit button 
}                 |

| disabledDate | specify the date that cannot be selected         | Function   | (time, format)=>{return false} |

| showButtons  | show Cancel/Submit buttons                       | Boolean  | false              |

| placeholder	 | placeholder of Input | String     | --                 |

### Events

| Event Name     | Description                                      |  Parameters                          |

|:---------------|:-------------------------------------------------|:-------------------------------------|

| confirm        |triggers when user confirms                       |  the value component's binding value |

| cancel         |triggers when user click the cancel button        | --                                   |

| clear          |triggers when user click the clear button         | --                                   |

## License

vue-datepicker-local is licensed under [The MIT License](LICENSE).