Have ideas to improve npm?Join in the discussion! »

    vue-datepicker-local

    1.0.19 • Public • Published

    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 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.

    Install

    npm i vue-datepicker-local

    DownloadsWeekly Downloads

    870

    Version

    1.0.19

    License

    MIT

    Unpacked Size

    50.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar