热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

bootstrapdaterangepicker汉化以及扩展功能

bootstrap daterangepicker使用介绍,具体如下 一、扩展的功能     

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 = '';

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


  });

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


推荐阅读
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
  • 微信平台通过盛派SDK(sdk.weixin.senparc.com)允许服务号和订阅号使用appId和token读取关注用户的个人信息。然而,这一过程需严格遵守隐私保护和数据安全的相关规定,确保用户数据的安全性和隐私性。 ... [详细]
  • 本文通过具体实例详细分析了哈希冲突的原因及其潜在影响,并探讨了多种有效的解决策略。研究不仅涵盖了MD5等常用哈希算法的局限性,还提出了基于哈希表扩展、双哈希技术和布隆过滤器等方法的综合解决方案,以提高数据处理的可靠性和效率。 ... [详细]
  • 寒假作业解析:第三周 2月12日 第7题
    尽快完成之前的练习任务!每日一练2.1 Problem A Laurenty and Shop 的题目要求是选择两条不同的路线以最小化总的等待时间。简要分析:通过对比不同路线的等待时间,可以找到最优解。此问题可以通过动态规划或贪心算法来解决,具体取决于路线的复杂性和约束条件。 ... [详细]
  • 在处理大数相加的问题时,有许多方法可以借鉴。本文介绍了两种不同的函数式编程方法:一种是从网络上找到的经典实现,另一种是作者自行设计的创新方案。通过函数式编程的方式重新实现了这两种方法,其中经典实现简洁明了,而创新方案则在性能和可读性方面有所提升。这些方法不仅适用于大数相加,还可以扩展应用于其他数值计算场景。 ... [详细]
  • 开源实习机会 | Compiler SIG 正式发布实习任务,诚邀您加入申请!
    对编译技术充满兴趣却苦于无从入手?当前疫情形势下,外出实习变得困难重重?现在,Compiler SIG 正式发布了一系列实习任务,为有志之士提供了宝贵的机会。无论你是初学者还是有一定基础的学生,都能在这里找到适合自己的实践项目。我们诚挚邀请您的加入,共同探索编译技术的无限可能! ... [详细]
  • 推荐:利用Dapper.SimpleCRUD扩展Dapper功能以简化CRUD操作
    Dapper作为广受欢迎的ORM框架之一,虽然灵活性极高,但在处理基本的CRUD操作时仍需手动编写SQL语句,这无疑增加了开发工作量。为了解决这一问题,Dapper.SimpleCRUD扩展库应运而生。该扩展库通过提供简洁的方法,显著简化了数据访问层的开发流程,使开发者能够更加高效地进行读取、插入、更新和删除操作。此外,Dapper.SimpleCRUD还支持事务管理和批量操作,进一步提升了开发效率和代码可维护性。 ... [详细]
  • 在IIS上运行的WebApi应用程序在开发环境中能够正常进行文件的读写操作。然而,在尝试通过FTP访问实时服务器上的文件列表时,遇到了无法显示的问题,尽管服务器配置与开发环境相同。这可能涉及权限设置、FTP服务配置或网络连接等方面的问题。 ... [详细]
  • React项目基础教程第五课:深入解析组件间通信机制 ... [详细]
  • 探索偶数次幂二项式系数的求和方法及其数学意义 ... [详细]
  • Golomb 编码是一种高效的变长编码技术,专门用于整数的压缩。该方法通过预定义的参数 \( M \) 将输入整数分解为商 \( q \) 和余数 \( r \) 两部分。具体而言,输入整数除以 \( M \) 得到商 \( q \) 和余数 \( r \),其中商 \( q \) 采用一元编码表示,而余数 \( r \) 则使用二进制编码。这种编码方式在数据压缩和信息传输中具有显著的优势,特别是在处理具有特定概率分布的数据时表现出色。 ... [详细]
  • Redis哈希数据结构入门指南
    Redis的哈希数据结构与Java中的HashMap类似,采用数组加链表的方式实现。数组用于存储哈希值的位置,而链表则用于处理哈希冲突的情况。此外,Redis的哈希数据结构还支持高效的字段操作和内存优化,适用于多种应用场景,如缓存和会话管理。 ... [详细]
  • 深入解析 Linux 内核中的 signal.c 文件:从泛读到精析
    本文将对 Linux 内核中的 `signal.c` 文件进行深入解析,从泛读到精析,全面解读其核心功能与实现机制。通过详细分析代码,探讨信号处理的内部运作,帮助读者更好地理解 Linux 内核的信号处理机制。相关学习资料已整理在 GitHub 仓库:https://github.com/GreyZhang/little_bits_of_linux。 ... [详细]
  • 在 Angular Google Maps 中实现图片嵌入信息窗口的功能,可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件,使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件,以实现动态加载和显示图片的功能。此外,还将探讨一些常见的问题和解决方案,帮助开发者更好地集成这一功能。 ... [详细]
  • 在TypeScript中,我定义了一个名为 `Employee` 的接口,其中包含 `id` 和 `name` 属性。为了使这些属性可选为空,可以通过使用 `| null` 或 `| undefined` 来扩展其类型定义。例如,`id: number | null` 表示 `id` 可以是数字或空值。这种类型的灵活性在处理不确定的数据时非常有用,可以提高代码的健壮性和可维护性。 ... [详细]
author-avatar
没有结局的梦z最痛
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有