bootstrap daterangepicker汉化以及扩展功能


Posted in Javascript onJune 15, 2017

bootstrap daterangepicker使用介绍,具体如下

一、扩展的功能

     1、初始化时,会自动创建一个select标签;

     2、当改变select值时,日期也会自动改变,并且会调用apply按钮的click事件

     3、点击此处进行预览

     4、github地址:https://github.com/lanleiming/daterangepicker-extend

二、效果展示

bootstrap daterangepicker汉化以及扩展功能

三、使用方法

1、替换掉原先的 daterangepicker.js 文件。
2、调用方法和原先一样。 $('#config-demo').daterangepicker();

四、代码实现

/* 扩展该组件:增加一个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);
   /* 扩展该组件 end */


  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 #Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 #Javascript
详解react如何在组件中获取路由参数
Jun 15 #Javascript
react-router JS 控制路由跳转实例
Jun 15 #Javascript
Vue路由跳转问题记录详解
Jun 15 #Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 #Javascript
package.json文件配置详解
Jun 15 #Javascript
You might like
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php简单分页类实现方法
2015/02/26 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
QQ登录简单实现代码
2021/03/09 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
分享python数据统计的一些小技巧
2016/07/21 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python实现聊天小程序
2018/03/13 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
考试没考好检讨书
2014/01/31 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
欢迎新生标语2015
2015/07/16 职场文书