Vue Picker

vuePicker.vue

<script>
import Pikaday from 'pikaday';

const today = new Date(),
i18n = {
  previousMonth: '上月',
  nextMonth: '下月',
  months: [
    '一月',
    '二月',
    '三月',
    '四月',
    '五月',
    '六月',
    '七月',
    '八月',
    '九月',
    '十月',
    '十一月',
    '十二月'
  ],
  weekdays: [
    '周日',
    '周一',
    '周二',
    '周三',
    '周四',
    '周五',
    '周六'
  ],
  weekdaysShort : [
    '日',
    '一',
    '二',
    '三',
    '四',
    '五',
    '六'
  ]
};

export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    data: {
      type: String,
      default: ''
    },
    holder: {
      type: String,
      default: ''
    },
    cls: {
      type: String,
      default: ''
    }
  },
  ready(){
    let field = this.$el,
    picker = new Pikaday({
      i18n,
      field
    });
    picker.setDate(today);
  }
};
</script>

<template>
  <input type="text" class="form-control" :class="cls" :id="id" :placeholder="holder" v-model="data" readonly>
</template>