小編這次要給大家分享的是原生js如何實現(xiàn)日期選擇插件，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務，在本地打下了良好的口碑，在過去的十余年時間我們累計服務了上千家以及全國政企客戶，如高空作業(yè)車租賃等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質量監(jiān)控加上過硬的技術實力獲得客戶的一致贊譽。

最近公司項目告一段落，想著寫個小玩意打發(fā)下上班時間，就用js很粗糙的實現(xiàn)了下日期選擇插件。間間斷斷歷時1天多，實現(xiàn)了選擇日期的功能，從寫完的整體代碼來看，耦合度還是蠻高的，我覺得還是我對js中的原型繼承方式理解不深刻，一定有更優(yōu)雅的方式再優(yōu)化下這份粗糙的代碼，各位前端小伙伴們在看完我的代碼后請麻煩指出其中實現(xiàn)的不好的地方，有批評指正讓我有動力繼續(xù)寫博客嘛！

先說下這個插件的功能：功能很簡單，目前只實現(xiàn)了選擇一個日期（當然可以賦初始值，默認是當前日期），選擇跨月日期時，會有一個粗糙的動畫效果，效果圖如下：

然后，說下我寫這個插件思路：

      1.插件整體是以function Dt作為基類，通過choose方法調用，如：$('#txtDt').choose({value: '2018/8/1'});$方法用來選擇要傳入選擇日期的文本控件。插件由head、content、foot3部分組成，head：選擇上月、下月、昨日、明日和顯示當前選擇日期；centent：顯示日期列表；foot：關閉

      2.Dt中render方法會更新屬性(年、月、日.....)

      3.跨月實現(xiàn)的動畫過渡主要通過content中的3個月列表（上月【隱藏】、當月、下月【隱藏】）分別替換來實現(xiàn)，比如顯示下月，只需要將下月列表逐步移動到顯示區(qū)域，將當月移動到上月，再將原上月列表刪除，再將最新的下月列表插入到當月之后。思路很簡單，小伙伴們看代碼就能一目了然了。只是，我對自己實現(xiàn)的上月、下月、昨日和明日的方法很厭惡，代碼嚴重耦合，美觀性很差，如果有小伙伴有更好的解決辦法，一定要告訴我。

話不多說，附上所有代碼：

html部分：  

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前文章：原生js如何實現(xiàn)日期選擇插件-創(chuàng)新互聯(lián)
URL分享：http://weahome.cn/article/egpej.html