欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

bootstrap daterangepicker汉化以及扩展功能

时间:2021-02-07 14:49:36|栏目:JavaScript代码|点击:

bootstrap daterangepicker使用介绍,具体如下

一、扩展的功能

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

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

     3、点击此处进行预览

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

二、效果展示

三、使用方法

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 */


  });

上一篇:bootstrap下拉分页样式 带跳转页码

栏    目:JavaScript代码

下一篇:js+html5实现canvas绘制简单矩形的方法

本文标题:bootstrap daterangepicker汉化以及扩展功能

本文地址:http://www.codeinn.net/misctech/58703.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有