vue使用datepicker封装日历组件

vue使用datepicker封装日历组件

• 安装datepicker

  npm install vue-datepicker --save
  

• 新建time.vue页面

  <template>
  	<div>
  		<myDatepicker :date="startTime" :option="multiOption" :limit="limit" v-model="dataForm.createDate" ></myDatepicker>
  	</div>
  </template>
  
  <script>
  import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'
  export default {
      name: "times1",
      data(){
          return {
              date: '',
              visible: false,
              dataForm: {
                  id: 0,
                  num: '',
                  name: '',
                  desc: '',
                  createDate: '',
                  createBy: '',
                  updateDate: '',
                  updateBy: ''
              },
              startTime: {  // 相当于变量
                  time: ''
              },
              multiOption: {
                  type: 'min',
                  week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                      month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                      format:"YYYY-M-D HH:mm",
                      // format: "YYYY-M-D",
                      inputStyle: {
                          'display': 'inline-block',
                          'padding': '6px',
                          'line-height': '22px',
                          'width': '160px',
                          'font-size': '16px',
                          'border': '2px solid #fff',
                          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
                          'border-radius': '2px',
                          'color': '#5F5F5F',
                          'margin': '0'
                      },
                      color: {                // 字体颜色
                          header: '#35acff',    // 头部
                          headerText: '#fff',    // 头部文案
                      },
                      buttons: {                // button 文案
                          ok: '确定',
                          cancel: '取消'
                      },
                      placeholder: '请选时间',
                      dismissible: true
                  },
                  limit: [{
                      type: 'weekday',
                      available: [1, 2, 3, 4, 5,6,0]
                  },
                  {
                      type: 'fromto',
                      from: '2016-02-01',
                      to: '2050-02-20'
                  }]
              }
          },
          components:{
              myDatepicker
          }
      }
  </script>
  

  • 启动服务 npm run serve 即可