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') ...
随机推荐
- selenium3.x的使用例子
1.需要下载selenium的相关包以备工程调用. 2.工程中配置引用selenium的lib. selenium3.x中主要是根据webdriver进行浏览器的各种操作,可以完全模仿人工操作浏览器, ...
- JS改变HTML元素的绝对坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- 打印出所有的"水仙花数"
题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1 ...
- ovs ovn 学习资料
0.A Primer on OVN http://blog.spinhirne.com/2016/09/a-primer-on-ovn.html 1.Open Virtual Networking W ...
- PyQuery的基本使用详解
0.安装:pip3 install pyquery 1.初始化 1.字符串初始化 # 字符串初始化 html = """ <div> <ul> & ...
- Linux(3)- 用户管理、文件与目录权限、常用命令、Linux软件包管理
一.用户管理 现代操作系统一般属于多用户的操作系统,也就是说,同一台机器可以为多个用户建立账户,一般这些用户都是为普通用户,这些普通用户能同时登录这台计算机,计算机对这些用户分配一定的资源. 普通用户 ...
- static关键字注意事项
/* static关键字注意事项 A:在静态方法中是没有this关键字的 如何理解呢? 静态是随着类的加载而加载,this是随着对象的创建而存在. 静态比对象先存在. B:静态方法只能访问静态的成员变 ...
- Linux一键安装web环境全攻略(阿里云ECS服务器)
摘自阿里云服务器官网,此处 一键安装包下载: 点此下载 安装须知 1.此安装包可在阿里云所有linux系统上部署安装,此安装包包含的软件及版本为: nginx:1.0.15.1.2.5.1.4.4 a ...
- TensorFlow学习笔记(二)深层神经网络
一.深度学习与深层神经网络 深层神经网络是实现“多层非线性变换”的一种方法. 深层神经网络有两个非常重要的特性:深层和非线性. 1.1线性模型的局限性 线性模型:y =wx+b 线性模型的最大特点就是 ...
- openCV学习——一、Mat类
一.Mat数据类型 在以下两个场景中使用 OpenCV 时,我们必须事先知道矩阵元素的数据类型: 使用 at 方法访问数据元素的时候要指明数据类型 做数值运算的时候,比如究竟是整数除法还是浮点数除法. ...