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 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
简单实现js浮动框
Dec 13 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 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中require和require_once的区别说明
2014/02/27 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Vue波纹按钮组件制作
2018/04/30 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python中的Django基本命令实例详解
2018/07/15 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python中import与from方法总结(推荐)
2019/03/21 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
django中related_name的用法说明
2020/05/20 Python
Python实现壁纸下载与轮换
2020/10/19 Python
python openssl模块安装及用法
2020/12/06 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
护理实习自我鉴定
2013/12/14 职场文书
银行介绍信范文
2014/01/10 职场文书
《学会待客》教学反思
2014/02/22 职场文书
行政监察建议书
2014/05/19 职场文书
授权委托书(完整版)
2014/09/10 职场文书
企业务虚会发言材料
2014/10/20 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis