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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
django序列化serializers过程解析
2019/12/14 Python
flask项目集成swagger的方法
2020/12/09 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
单位在职证明范本
2014/01/09 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014年药房工作总结
2014/11/22 职场文书
开学第一天的感想
2015/08/10 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
redis实现的四种常见限流策略
2021/06/18 Redis
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android