vue-datepicker-local

A datepicker for Vue.js
16,932 295
vue components datepicker
Install
npm install vue-datepicker-local
Latest Version:1.0.19
Vue:2
License:MIT
Last Updated:Dec 7, 2022
Links: GitHub  ·  npm
Maintainer: weifeiyue

vue-datepicker-local

A Beautiful Datepicker Component For Vue2

  • Lightweight (less than 5kb minified and gzipped)
  • Only dependencies Vue
  • Beautiful!

image

Demo

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

Usage

Install

$ npm install vue-datepicker-local

ES6

<template>
  <vue-datepicker-local v-model="time" />
</template>

<script>
import VueDatepickerLocal from 'vue-datepicker-local'

export default {
  components: {
    VueDatepickerLocal
  },
  data () {
    return {
      time: new Date()
    }
  }
}
</script>

Browser globals

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

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/vue-datepicker-local.css">
</head>
<body>
  <div id="app">
    <vue-datepicker-local v-model="time"></vue-datepicker-local>
  </div>
  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-datepicker-local.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        time: new Date()
      }
    })
  </script>
</body>
</html>

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 weekhourTip: '选择小时', // tip of select hourminuteTip: '选择分钟', // tip of select minutesecondTip: '选择秒数', // tip of select secondyearSuffix: '年', // format of headmonthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(''), // months of headmonths: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(''), // months of panelweeks: '一_二_三_四_五_六_日'.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.

Related Packages

@schlechtwetterfront/vue-datepicker

A customizable datepicker for Vue 3

5,042 2
datepicker vue
vue2-datepicker-mask

A Datepicker Component For Vue2. Forked from vue2-datepicker

1,801 0
datepicker vue
vue2-datepicker-improved

A Datepicker Component For Vue2. Forked from vue2-datepicker

711 0
datepicker vue
vue-datepicker

calendar and datepicker component with material design for Vue.js

131,932 694
datepicker vue vue-datepicker
vue-date

datepicker component for Vue.js

25,498 153
datepicker vue date

Version History

Version Released License
1.0.19 MIT
1.0.18 MIT
1.0.17 MIT
1.0.16 MIT
1.0.15 MIT