bootstrap-datepicker 时间范围选择函数封装

官网

https://bootstrap-datepicker.readthedocs.io/en/latest/index.html

需要引入的依赖包,发现还挺多的

<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css">

封装的函数

        /*
* name:时间范围控件
* start:起始时间表单id值
* end:结束时间表单id值
*
*/
function dataTimeRange(start,end){//日期范围
$('#'+start).datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date(),
format:'yyyy-mm-dd',
language:'zh-CN'
}).on('changeDate',function(e){
var startTime = e.date;
$('#'+end).datepicker('setStartDate',startTime);
}); //结束时间
$('#'+end).datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date(),
format:'yyyy-mm-dd',
language:'zh-CN'
}).on('changeDate',function(e){
var endTime = e.date;
$('#'+start).datepicker('setEndDate',endTime);
});
}

  

  

bootstrap-datepicker 时间范围选择函数封装的更多相关文章

  1. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  2. BootStrap dateRangePicker时间范围控件

    BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...

  3. bootstrap datepicker含有hasDatepicker无法弹出

    bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...

  4. bootstrap datepicker显示日历

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  5. 双日历插件--jq datepicker时间范围选择

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 【Bootstrap】Bootstrap Datepicker使用

    插件:http://url.cn/V4S8w4 1.添加样式和引用JS文件 <link href="CSS/bootstrap-datetimepicker.css" rel ...

  7. bootstrap datepicker 属性设置 以及方法和事件

    DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月 ...

  8. 常见问题:bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  9. Bootstrap datepicker 在弹出窗体modal中不工作

    解决办法 在 show 方法后面 添加 下面一段代码 $('#modalCard').modal('show');—例子 打开 弹出窗体 //$('#modalCard').modal('hide') ...

随机推荐

  1. FineReport----单元格元素(数据列、公式、斜线)

    一.绑定.插入数据列 数据集字段绑定 二.公式 1.单元 格计算 1.两个单元格(C7,I7)和 2.等于某单元格的值 D7等C7单元格的值 3.C7/8(除) 4.除数被除数为零.空的处理 http ...

  2. 为Visual SVN使用签名后的域名证书

    装了个VisualSVN Server管理代码,可每次浏览的时候都会提示证书有问题,要不要继续神马的,好烦人,于是搜索了一下免费SSL证书,申请了一个,虽然不是绿的,但总算是不报问题了. 下面是整个过 ...

  3. 14.wamp自定义网站根目录

    1.首先打开Apache 中的配置文件httpd.conf crtl+f 搜索  documentroot  ,在找到的目录中将目录修改自己的网站的目录,注意\ 与/ 2.在向下移动,找到<Di ...

  4. 隐藏显示终端的光标(shell echo,linux c printf)

    https://www.cnblogs.com/niocai/archive/2011/11/11/2245727.html 一.使用shell 的 echo 命令实现. echo -ne <c ...

  5. jenkins 升级

    升级Jenkins Jenkins的开发迭代非常快,每周发布一个开发版本,长期支持版每半年更新一次(ps:大版本更新).如此频繁的更新,怎么升级呢? war:下载新版的war文件,替换旧版本war文件 ...

  6. 解决 pip 安装opendr包 卡住的问题

    使用豆瓣的源(已经确认过了该源中有opendr包),pip安装opendr,结果卡在了下载完成的位置,什么提示也没有.(如下图) 既然安装包已经下载下来了又安装不上,则应该是安装代码中有什么问题,只不 ...

  7. WSGI基础知识(转)

    add by zhj: WSGI全称Web Server Gateway Interface,即Web网关接口.其实它并不是OSI七层协议中的协议,它就是一个接口(即函数)而已,而WSGI规定了该接口 ...

  8. Redis配置文件的使用

    Redis基本配置 常规配置 进到配置文件下 vi /etc/redis.conf 写入配置项 port 1111 # 配置端口号 daemonize yes # 是否后台运行 daemonize y ...

  9. Python生成器是什么

    生成器是 Python 初级开发者最难理解的概念之一,虽被认为是 Python 编程中的高级技能,但在各种项目中可以随处见到生成器的身影,你得去理解它.使用它.甚至爱上它. 提到生成器,总不可避免地要 ...

  10. Python(数据库之数据类型)

    一.创建表的完整语法 #[]内的可有可无,即创建表时字段名和类型是必须填写的,宽度与约束条件是可选择填写的. create table 表名( 字段名1 类型[(宽度) 约束条件], 字段名2 类型[ ...