一、進入項目根目錄,經過下面命令下載vue-datepicker日期控件,以下圖已經下載成功。(前提:安裝npm)javascript
npm install vue-datepicker --save
注意:vue-datepicker 控件中引入了moment,因此咱們也須要下載。html
npm install moment --save
二、在對應的vue模板中引用日期控件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>
四、導入vue-datepicker-es6.vue,註冊Datepicker,以下圖java
<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>
五、最終結果顯示es6
總結npm
第一次使用vue模板,比較生疏,經過查詢網上資料不是很全,花費了2個小時的功夫。把功能完成,作個平常工做的記錄。bash