mint ui datetimepicker 手機端jquery datetimepicker 總結應用

對於手機端datetimepicker的使用 在使用minit ui 的datatimepicker的使用方法

首先它須要兩個觸發器 這裏由於項目用到的是開始到結束的時間 我就點擊的時候手動傳入了一個參數

<input id='start' type="text" class='form-control input-sm' readonly="" name='start' @click='openPicker("start")' v-model='startTime'>
<input id='end' type="text" class='form-control input-sm' readonly="" name='end' @click='openPicker("end")' v-model='endTime'> 

　　而後在vue的methods中聲明這個方法

openPicker(type) {
        this.type=type;
        this.$refs.picker.open();
      },

　　這裏我接受了 在點擊的時候傳遞的參數用來判斷我是點擊的是開始仍是結束，再點擊肯定之後會觸發一個事件handleConfirm

handleConfirm(data) {
        let date = moment(data).format('YYYY-MM-DD');
        if(this.type=='start'){
          this.startTime = date;
        }
        if(this.type == 'end'){
          this.endTime = date;
        }
      }

　　再點擊肯定之後我把點擊的內容傳遞給input中  着裏的時間必需要格式化一下 由於單位就讓穿的格式就是YYYY-MM-DD 因此咱們得把參數格式化下

      這裏推薦使用的是 moment.js

import moment from 'moment'

　　對應的文檔地址是 http://momentjs.cn/docs/ 這樣就能夠在咱們事先的input標籤中添加到咱們想要的時間的參數了 補一下組件的選項

<mt-datetime-picker
      v-model="pickerVisible"
      type="date"
      ref="picker"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      :startDate = 'maxdata'
      :endDate = 'mindata'
      >
    </mt-datetime-picker>

　　對於不用vue的朋友 我推薦一款手機端作的很是好的jquery插件

　　連接：https://pan.baidu.com/s/1pLyuN6F 密碼：yoq5

　　懂js得 進入date.js 就能夠調整它的選項 相似minit ui的樣式