基于 Bootstrap Datetimepicker 聯(lián)動(dòng)
先看一下 層級(jí)聯(lián)動(dòng)的案例
先選擇前面時(shí)間后 后面的時(shí)間不要超過(guò)前面的時(shí)間
先選擇后面的時(shí)間后,前面的時(shí)間不要少于后面的時(shí)間
下面看封裝代碼
function initDateTimePicker(startTime, endTime, timeFormat, minview) { $(startTime).datetimepicker("remove"); $(startTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), format: timeFormat, startView: minview, minView: minview, }).on("changeDate", function() { var value = $(startTime).val(); $(endTime).datetimepicker("remove"); $(endTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), startDate: value, format: timeFormat, startView: minview, minView: minview, }) }); $(endTime).datetimepicker("remove"); $(endTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), format: timeFormat, startView: minview, minView: minview, }).on("changeDate", function() { var value = $(endTime).val(); $(startTime).datetimepicker("remove"); $(startTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: value, format: timeFormat, startView: minview, minView: minview, }) }); }
初始化datetimepicker及起止時(shí)間雙向聯(lián)動(dòng)公共方法 startTime:起始時(shí)間輸入框id號(hào),例如:'#archiveStartTime'
endTime:結(jié)束時(shí)間輸入框id號(hào),例如:'#archiveEndTime' timeFormat
:時(shí)間格式,例如:'yyyy-mm-dd',
minview:最先顯示時(shí)間 或者層級(jí)
總結(jié)
以上所述是小編給大家介紹的Bootstrap Datetimepicker 聯(lián)動(dòng),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
- Bootstrap select下拉聯(lián)動(dòng)(jQuery cxselect)
- jQuery基于BootStrap樣式實(shí)現(xiàn)無(wú)限極地區(qū)聯(lián)動(dòng)
- 基于AngularJs + Bootstrap + AngularStrap相結(jié)合實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)代碼
- 基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇
- 基于Bootstrap實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)
相關(guān)文章
JavaScript的設(shè)計(jì)模式經(jīng)典之建造者模式
建造者模式是設(shè)計(jì)模式的一種,將一個(gè)復(fù)雜對(duì)象的構(gòu)建與它的表示分離,使得同樣的構(gòu)建過(guò)程可以創(chuàng)建不同的表示。接下來(lái)通過(guò)本文給大家介紹JavaScript的設(shè)計(jì)模式經(jīng)典之建造者模式,感興趣的朋友一起學(xué)習(xí)吧2016-02-02用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼
用Javascript檢查Adobe PDF插件是否安裝的代碼2009-12-12JS 獲取span標(biāo)簽中的值的代碼 支持ie與firefox
JS獲取span標(biāo)簽中的值的代碼,在實(shí)際應(yīng)用中經(jīng)常用的到的功能,原理很簡(jiǎn)單,大家可以拓展下。2009-08-08Javascript實(shí)現(xiàn)倒計(jì)時(shí)(防頁(yè)面刷新)實(shí)例
本文分享了Javascript實(shí)現(xiàn)倒計(jì)時(shí)并且頁(yè)面不刷新的實(shí)例,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12js實(shí)現(xiàn)讓某個(gè)動(dòng)作延遲幾秒執(zhí)行
這篇文章主要介紹了使用js實(shí)現(xiàn)讓某個(gè)動(dòng)作延遲幾秒執(zhí)行的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06javascript截取字符串(通過(guò)substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06微信小程序注冊(cè)60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序注冊(cè)60s倒計(jì)時(shí)功能,以及使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08