bootstrap-datepicker 时间范围选择函数封装
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 时间范围选择函数封装的更多相关文章
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
- BootStrap dateRangePicker时间范围控件
BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...
- bootstrap datepicker含有hasDatepicker无法弹出
bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...
- bootstrap datepicker显示日历
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 双日历插件--jq datepicker时间范围选择
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【Bootstrap】Bootstrap Datepicker使用
插件:http://url.cn/V4S8w4 1.添加样式和引用JS文件 <link href="CSS/bootstrap-datetimepicker.css" rel ...
- bootstrap datepicker 属性设置 以及方法和事件
DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月 ...
- 常见问题:bootstrap datepicker日期插件汉化
引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...
- Bootstrap datepicker 在弹出窗体modal中不工作
解决办法 在 show 方法后面 添加 下面一段代码 $('#modalCard').modal('show');—例子 打开 弹出窗体 //$('#modalCard').modal('hide') ...
随机推荐
- 微信公众号 openId 支付 php中file_get_contents与curl性能比较分析
w http://www.jb51.net/article/57238.htm
- 面向对象 - 1.面向过程/2.面向对象/3.如何使用类/4.__init__方法/5.属性查找/6.补充知识/7.可扩展性高
编程范式(流派): 面向对象编程,面向过程编程 各有用处!! 编程:语法+数据结构(list dict)+算法(逻辑)-----------------------------------1.面向过程 ...
- tornado 第一篇
一:异步和非阻塞IO 实时的web特性通常需要每个用户一个大部分时间,在传统的同步web服务器中,这意味着需要给每个用户分配一个专用的线程,这样的开销是十分巨大 tornado使用啦一种单线程事件循 ...
- (转)基于深度学习的目标检测技术演进:R-CNN、Fast R-CNN、Faster R-CNN
object detection我的理解,就是在给定的图片中精确找到物体所在位置,并标注出物体的类别.object detection要解决的问题就是物体在哪里,是什么这整个流程的问题.然而,这个问题 ...
- 1.Oracle数据库查看用户锁表和对表解锁的sql语句
① 查看用户锁表 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.lock ...
- HDU2571:命运(简单dp)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2571 没什么好说的,不过要处理好边界. 代码如下: #include <iostream> # ...
- redhat 9.0安装完不能上网解决办法(补) - 并附上redhat9.0 下载链接
昨天一位网友Q我,说我的开发环境搭建教程按步骤最后上不了网怎么解决我才突然想起9.0版本在VM7,8中存在问题,于是今天我就简单说下解决的方法. 由于本人习惯使用redhat 9.0版本所以到现在还是 ...
- 关于maven包冲突的一些思路
在最近的项目中出现了很多包冲突,有时一下子就能猜到错误,但是有写往往需要很久都不能定位问题,尤其是项目人员参差不齐,有时为了方便私自引入一些工具类,而未考虑到项目本身. maven的出现方便了我们的包 ...
- POJ - 3662 Telephone Lines (Dijkstra+二分)
题意:一张带权无向图中,有K条边可以免费修建.现在要修建一条从点1到点N的路,费用是除掉免费的K条边外,权值最大的那条边的值,求最小花费. 分析:假设存在一个临界值X,小于X的边全部免费,那么此时由大 ...
- $用ConfigParser模块读写conf配置文件
ConfigParser是Python内置的一个读取配置文件的模块,用它来读取和修改配置文件非常方便,本文介绍一下它的基本用法. 数据准备 假设当前目录下有一个名为sys.conf的配置文件,其内容如 ...