1. 程式人生 > >vue移動端日曆元件 mintUi dateTime picker 設定開始和結束日期

vue移動端日曆元件 mintUi dateTime picker 設定開始和結束日期

=====================================追加提示2018.9.17===============================

繼續填坑  如果你想修改  這個元件的 取消和確定按鈕   則需要像下面的startDate一樣

在標籤上寫  :cancel-text 和 :confirm-text  然後用一個vue變數接一下 設定一下值就可以了

這裡我只想吐槽  屬性怎麼用  完全靠自己猜想   真的是可以了

=====================================追加提示2018.9.17===============================

=====================================追加提示2018.8.13===============================

這裡在設定初始時間的時候  又遇到一個bug   你的web頁面 在ios 和安卓開啟的時候  安卓還好  ios 存在問題!!!!!

這裡 樓主原來日期格式 都是 “2018-8-13”的格式 後來發現  如果你用這種格式設定初始時間 ios會有bug  顯示錯亂

然後 所有都要使用  “2018/8/13” 這種格式  這種格式在ios裡 不會報錯

=====================================追加提示2018.8.13===============================

==============================正文===========================

首先必須吐槽 mintui

<script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
<link href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css" rel="stylesheet" type="text/css">

這個2.2.13版本中picker 聯動  你拉一會就對不上值了  也不知道這麼大的bug  mintui自己看不見麼  然後搜了一圈

大家推薦2.2.9版本  說這個靠譜點 

這裡假設 如果你有一個需求 比如 起始日期為某年的某月  而不是當前時間開始 

那麼mintui的 picker 你可以放棄了 

他的這個onValuesChange方法 那叫一個亂 

 這裡我友情提示這個方法返回2個引數 第一個引數是picker物件,第二個values裡是你聯動的選中值的陣列,(如下圖)

這裡還不難  不過如果你想懂官網的這句(下面的圖),你會發現官網一個例子都沒有,你都不知道咋用,

提示下,也就是這麼寫,

,

index是values這個陣列長度內的值 比如你2列拉動 那麼index 就是0,1

如果你3級聯動那就是0,1,2          剩下的你自己悟吧

=======================================華麗的分割線=========================================

上面純屬吐槽 ,這個元件太垃圾了。回到我們的要求 如果你想設定拉動的初始值,比如日期的

你需要使用DateTime Picker        這個元件又是一個大坑

(這裡我真是服了,包括官網,你們給的api 自己不試麼 給別人的例子也不試???????)

來看官網

這是樓主用的,由於業務要求只顯示年和月,所以要去掉日,這裡嘗試刪除date-formate 或給他的value設定null和空字串

均失敗!!!!!!!!!!!!!!!!!!!!!!!

就問你服不服這元件,然後樓主沒辦法只能靠js+css了,沒辦反,如果你有更好的,可以告訴我

好了,日不顯示了,然後就是最大的坑了,設定起止時間

來看官網

然後樓主就寫成這個樣子,問題來了。 他!不!好!使!!!!!!

然後百度,官網+所有百度到的都是這麼寫

https://www.cnblogs.com/smallteeth/p/8004462.html   連結1

https://blog.csdn.net/mhlghy/article/details/80269774  連結2

https://blog.csdn.net/thekingyu/article/details/78974852 連結3

我不再掛連結了  反正都是一個樣 也沒一個好使,我也是服了。最後,還是英語救了樓主

這是js控制檯報的弱警告,然後樓主讀了一遍 大概明白了 所以做了替換  結果    好!使!了!

哎,這年代,誰都靠不住,只能靠自己,希望這部落格能幫助到使用這個元件的人。我把頁面原始碼掛出來,需要的去下載吧

https://download.csdn.net/download/gaoqiang1112/10571933  連結