Ntbx-vue-datepicker-local NPM

ntbx-vue-datepicker-local

A datepicker with year offset feature

A Beautiful Datepicker Component For Vue2

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

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"
yearOffset	to set year offset	Number	0
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.

vue component datepicker year offset

@infinitebrahmanuniverse/nolb-nt @everything-registry/sub-chunk-2352 @zalastax/nolb-nt

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago