记录 第一次使用 VUE vue-datepicker 日期控件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/LZHH_2008/article/details/93627914

1.首先导入 ：

2. html代码：  <myDatepicker :date="startTime" :option="multiOption" :limit="limit" v-model="dataForm.createDate" ></myDatepicker>

3.js代码：

<script>
import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'
  export default {
    data () {
      return {
        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>

4效果：