vue-datepicker的使用

一、進入項目根目錄,經過下面命令下載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

相關文章
相關標籤/搜索