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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
range 标准化之获取
Aug 28 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 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桌面中心(四) 数据显示
2007/03/11 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
详解React 元素渲染
2020/07/07 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python+django+rest框架配置创建方法
2019/08/31 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
详细分析Python collections工具库
2020/07/16 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
公司员工检讨书
2014/02/08 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
导师工作推荐信范文
2014/05/17 职场文书
机械专业求职信
2014/05/25 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
安全教育的主题班会
2015/08/13 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android