bootstrap daterangepicker漢化以及擴(kuò)展功能
bootstrap daterangepicker使用介紹,具體如下
一、擴(kuò)展的功能
1、初始化時(shí),會(huì)自動(dòng)創(chuàng)建一個(gè)select標(biāo)簽;
2、當(dāng)改變select值時(shí),日期也會(huì)自動(dòng)改變,并且會(huì)調(diào)用apply按鈕的click事件
3、點(diǎn)擊此處進(jìn)行預(yù)覽
4、github地址:https://github.com/lanleiming/daterangepicker-extend
二、效果展示
三、使用方法
1、替換掉原先的 daterangepicker.js 文件。
2、調(diào)用方法和原先一樣。 $('#config-demo').daterangepicker();
四、代碼實(shí)現(xiàn)
/* 擴(kuò)展該組件:增加一個(gè)select */ var _this = this; var selectItem = '<select id="dateranepicker_select" class="form-control width150 inline-block">'; selectItem += '<option>今日</option>'; selectItem += '<option>昨日</option>'; selectItem += '<option selected="selected">最近7日</option>'; selectItem += '<option>最近15日</option>'; selectItem += '<option>最近30日</option>'; selectItem += '<option>本月</option>'; selectItem += '<option>上月</option>'; selectItem += '</select>'; this.element.parent().append(selectItem); $(document).on('change','#dateranepicker_select',function(){ function auto0(num){ return num>10?num:'0'+num; } var val = $(this).val(); var c_start_date = new Date(); var c_end_date = new Date(); if(val=='今日'){ } else if(val=='昨日'){ c_start_date.setDate(c_start_date.getDate()-1); c_end_date.setDate(c_end_date.getDate()-1); } else if(val=='最近7日'){ c_start_date.setDate(c_start_date.getDate()-7); c_end_date.setDate(c_end_date.getDate()-1); } else if(val=='最近15日'){ c_start_date.setDate(c_start_date.getDate()-15); c_end_date.setDate(c_end_date.getDate()-1); } else if(val=='最近30日'){ c_start_date.setDate(c_start_date.getDate()-30); c_end_date.setDate(c_end_date.getDate()-1); } else if(val=='本月'){ var cyear = c_start_date.getFullYear(); var cmonth = c_start_date.getMonth(); c_start_date = new Date(cyear,cmonth,1); c_end_date =new Date(cyear+'-'+ (cmonth+1) +'-'+new Date(cyear,cmonth+1,0).getDate()); } else if(val=='上月'){ var cyear = c_start_date.getFullYear(); var cmonth = c_start_date.getMonth()-1; c_start_date = new Date(cyear,cmonth,1); c_end_date =new Date(cyear+'-'+ (cmonth+1) +'-'+new Date(cyear,cmonth+1,0).getDate()); } _this.setStartDate(c_start_date); _this.setEndDate(c_end_date); timespanStr =auto0(c_start_date.getMonth()+1)+'/'+ auto0(c_start_date.getDate()) + '/'+c_start_date.getFullYear()+'-'+ auto0(c_end_date.getMonth()+1) + '/' +auto0(c_end_date.getDate()) + '/' +c_end_date.getFullYear(); _this.element.val(timespanStr); _this.hide(); _this.element.trigger('apply.daterangepicker', _this); /* 擴(kuò)展該組件 end */ });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09用JS操作FRAME中的IFRAME及其內(nèi)容的實(shí)現(xiàn)代碼
一直都需要這樣的東西,發(fā)現(xiàn)了這個(gè)好東西,一定要研究下2008-07-07layui監(jiān)聽(tīng)單元格編輯前后交互的例子
今天小編就為大家分享一篇layui監(jiān)聽(tīng)單元格編輯前后交互的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁(yè)面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07