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. 巨蟒python全栈开发-第17天 核能来袭-成员

    一.今日主要内容 1.成员 在类中你能写的所有内容都是类的成员 2.变量 (1)实例变量:昨天写的就是实例变量,由对象去访问的变量. (2)类变量(静态变量):此时,这个变量属于类,但是对象也可以访问 ...

  2. 超哥带你学网络编程部分blog

    https://www.cnblogs.com/clschao/articles/9593164.html  网络编程 https://www.cnblogs.com/clschao/articles ...

  3. Android Activity 生成及Activity之间传值

    Activity 是Android中重要的组件,每个Activity对应一个界面,如何生成新的Activity,如何在不同Activity传递数值呢. 一. 生成新的Activity,当然要使用Int ...

  4. 并发测试 java.lang.OutOfMemoryError: GC overhead limit exceeded Xms Xmx 阻塞请求 单节点 请求分发 负载均衡

    at javax.servlet.http.HttpServlet.service(HttpServlet.java:705) at javax.servlet.http.HttpServlet.se ...

  5. 微信支付 php发送POST请求

    https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=20_1 <_xml> <mch_id>132</mc ...

  6. (转) RabbitMQ学习之延时队列

    http://blog.csdn.net/zhu_tianwei/article/details/53563311 在实际的业务中我们会遇见生产者产生的消息,不立即消费,而是延时一段时间在消费.Rab ...

  7. pip安装lxml报错 Fatal error in launcher: Unable to create process using '"c:\users\administrator\appdata\local\programs\python\python36\python.exe" "C:\Users\Administrator\AppData\L

    pip install lxml 安装报错 E:\apollo\spider_code>Fatal error in launcher: Unable to create process usi ...

  8. python 数据库查询条件`不等于`

    1.python 数据库查询条件不等于 当在做数据库查询的时候,想根据业务需求进行条件的筛选或过滤, 但是django封装的数据库语句中没有 '不等于' 查询操作. 2.例如:通过以下语句进行'不等于 ...

  9. openwrt undefined reference to ‘getpwent_r’

    由于须要安装 su sudo useradd groupadd chown login 等用户管理命令,会訪问passwd文件. 用到了 getpwant_r 函数.详细是哪个命令引起的,临时不知. ...

  10. Java中Collections和Collection的区别

    java.util.Collection Collection 层次结构 中的根接口.Collection 表示一组对象,这些对象也称为 collection 的元素.一些 collection 允许 ...