1. 程式人生 > >vue使用pikaday日期外掛

vue使用pikaday日期外掛

一、vue專案中安裝pikaday外掛

命令:npm install pikaday --save-dev

二、vue專案中安裝moment外掛

命令:npm install moment --save-dev
說明:該外掛用來格式化日期外掛

三、元件中引入日期外掛css

import 'pikaday/css/pikaday.css'

四、元件中呼叫

在元件的mounted鉤子中使用

mounted:function(){
    var i18n = { // 需要在程式中進行定義,才可以進行漢化
            previousMonth : '上個月',
            nextMonth   : '下個月',
            months      : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            weekdays    : ['週日','週一','週二','週三','週四','週五','週六'],
            weekdaysShort : ['日','一','二','三','四','五','六']
          }

    var picker = new Pikaday({
      field: this.$refs.dateInput,   //繫結日期外掛的input物件 
      format: 'YYYY/M/D',
      i18n:i18n   //對預設的日期進行格式化,包括漢化
    })

    this.$once('hook:beforeDestroy', function () {   //銷燬控制元件所佔資源
      picker.destroy()
    })
  },

用這個做個筆記方便後期使用。