Bootstrap中datetimepicker日期控件1899年問題解決


 Bootstrap中datetimepicker日期控件1899年問題解決

  最近在開發項目的過程中,遇到一個很尷尬的問題。我們項目一直采用的是angular+bootstrap,日期控件用的是bootstrap中的datetimepicker,這個日期控件存在一個bug,當用戶輸入日期時,日期控件會自動跳到1899年,這個用戶體驗特別不好,一不小心就可能點錯了。因為我們的項目中涉及的日期非常多,所以領導強烈要求我們前端解決這個問題,並且需要支持yyyy-MM-ddyyyy/MM/ddyyyy.MM.ddyyyyMMdd等四種格式的兼容。作為前端中的一員,我不遺余力去從網上找答案,在百度上找了好幾天,沒有結果。就在最后,我忽然想到了github,在這上面我找到了我想要的答案。下面和大家分享一下。

  一、存在問題

    當用戶輸入日期時,控件會自動跳到1899年。至於為什么是1899年,老大說,1899是控件支持的最小日期。我還以為是1899年誕生的(可笑)。

  

  二、解決方法

  1、修改bootstrap-datetimepicker源碼

    將控件默認的1899年改為默認當前日期。

 

  2、支持的多種格式

    其實datetimepicker默認支持yyyy-MM-dd、yyyy/MM/dd、yyyy.MM.dd三種日期格式,另外一種yyyyMMdd需要我們自己在代碼中實現。

    我實現的方法是當用戶輸完日期后,用正則表達式,將八位數轉換為yyyy-MM-dd日期格式。

1 var regex = /^(\d{4})(\d{2})(\d{2})$/;
2 return date.replace(regex, "$1-$2-$3");

 

  3、需要注意的問題

  datetimepicker屬性forceParse,   Boolean. 默認值: true

  當選擇器關閉的時候,是否強制解析輸入框中的值。也就是說,當用戶在輸入框中輸入了不正確的日期,選擇器將會盡量解析輸入的值,並將解析后的正確值按照給定的格式format設置到輸入框中。這個屬性就默認支持yyyy-MM-dd、yyyy/MM/dd、yyyy.MM.dd三種日期格式轉換為自定義的格式。

 

  經過這個問題,我突然發現,每次解決問題,我找答案的途徑都太單一,每次都是當我快要放棄的時候,才會想到其他的途徑。致自己一句話,沒有什么是github上沒有的,時刻把github放心里。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM