mint ui datetimepicker 手机端jquery datetimepicker 总结应用
生活随笔
收集整理的這篇文章主要介紹了
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-pickerv-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的樣式?
轉載于:https://www.cnblogs.com/smallteeth/p/8004462.html
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的mint ui datetimepicker 手机端jquery datetimepicker 总结应用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Mysql实现企业级日志管理、备份与恢复
- 下一篇: yii2 basic版 MVC 部分