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的樣式