vue-datepicker的使用

1、进入项目根目录，通过下面命令下载vue-datepicker日期控件，如下图已经下载成功。（前提：安装npm）

npm install vue-datepicker --save

注意：vue-datepicker 控件中引入了moment，所以我们也需要下载。

npm install moment --save

2、在对应的vue模板中引用日期控件

<template>
<div class="container">
  <form class="card p-2">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="policyNo">保单号</label>
        <input type="text" class="form-control" id="policyNo" placeholder="保单号">
      </div>
      <div class="form-group col-md-6">
        <label for="busCode">业务代码</label>
        <input type="text" class="form-control" id="busCode" placeholder="业务代码">
      </div>
      <div class="form-group col-md-6">
        <label for="startTime">开始日期</label>
           <date-picker :date="startTime" :option="option" :limit="limit" id="startTime"></date-picker>
      </div>
      <div class="form-group col-md-6">
        <label for="endTime">结束日期</label>
         <date-picker :date="endTime" :option="option" :limit="limit" id="endTime"></date-picker>
      </div>
  
     <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">查询</button>
      </div>
     </div>
    </div>
  </form>
</template>

4、导入vue-datepicker-es6.vue,注册Datepicker，如下图

<script>
import Datepicker from 'vue-datepicker/vue-datepicker-es6.vue'
export default {
        components: {
           'date-picker': Datepicker
        },
        data() {
            return {
                startTime: {
                    time: ''
                },
                endTime: {
                    time: ''
                },
                option: {
                    type: 'day',
                     week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm',
                    placeholder: '请输入日期',
                    inputStyle: {
                        'display': 'inline-block',
                        'padding': '4px',
                        'line-height': '17px',
                        'font-size': '14px',
                        'width': '190px',
                        'border': '1px solid #ddd',
                        // 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
                        'border-radius': '5px',
                        'color': '#5F5F5F'
                    },
                    color: {
                        header: '#ccc',
                        headerText: '#f00'
                    },
                    buttons: {
                        ok: '确定',
                        cancel: '取消'
                    },
                    overlayOpacity: 0.5, // 0.5 as default
                    dismissible: true // as true as default
                },
                timeoption: {
                    type: 'min',
                    week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm'
                  },
                  multiOption: {
                    type: 'multi-day',
                    week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm'
                  },
                   limit: [{
                      type: Array,
                      default:function _default(){
                        return [];
                      }
                    }]
            }
        }
    }
</script>

5、最终结果显示

总结

   第一次使用vue模板，比较生疏，通过查询网上资料不是很全，花费了2个小时的功夫。把功能完成，做个日常工作的记录。

转载于:https://my.oschina.net/u/3647421/blog/2873031