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_02_理解undefined和null
Oct 11 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
koa+jwt实现token验证与刷新功能
May 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
PHP时间类完整代码实例
2021/02/26 PHP
动态加载js的几种方法
2006/10/23 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
最新教师自我评价分享
2013/11/12 职场文书
简历自荐信
2013/12/02 职场文书
高二化学教学反思
2014/01/30 职场文书
高中毕业自我评价
2014/02/08 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Apache POI的基本使用详解
2021/11/07 Servers