Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-datepicker-local with all npm packages installed. Try it out:

var vueDatepickerLocal = require("vue-datepicker-local")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-datepicker-local v1.0.19

A datepicker for Vue.js

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

PropDescriptionTypeDefault
v-modeldates to be manipulatedDate/Array--
namename for inputString--
typetype for input (inline/normal)Stringnormal
inputClasscustom class name for inputString--
popupClasscustom class name for popupString--
disableddetermine whether the DatePicker is disabledBooleanfalse
clearableclear the dateBooleanfalse
rangeSeparatorrange separatorString"~"
formatto set the date formatString"YYYY-MM-DD"
localthe local of the DatePickerObject{
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
}
disabledDatespecify the date that cannot be selectedFunction(time, format)=>{return false}
showButtonsshow Cancel/Submit buttonsBooleanfalse
placeholderplaceholder of InputString--

Events

Event NameDescriptionParameters
confirmtriggers when user confirmsthe value component's binding value
canceltriggers when user click the cancel button--
cleartriggers when user click the clear button--

License

vue-datepicker-local is licensed under The MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free