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. Linux磁盘分区的理解

    磁盘分割: 一块磁盘可以被分割为多个分区artition. 磁盘链接的方式 正常的实体机使用的都是/dev/sd[a-]的硬盘档名 虚拟机可能会使用/dev/vd[a-p]这种装置档名 SATA/US ...

  2. 兼容获取元素当前样式 currentStyle || getComputedStyle

    function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...

  3. python setup.py install 报错:error: [WinError 3] 系统找不到指定的路径。: 'C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\VC\\PlatformSDK\\lib

    Outline 在通过 setup.py 安装python模块时,遇到了以下报错: # 执行 python setup.py install # 报错: error: [WinError 3] 系统找 ...

  4. 流畅的python 符合python风格的对象

    对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的标准方式.Python 提供了两种方式. repr() 以便于开发者理解的方式返回对象的字符串表示形式.str() 以便于用户理解 ...

  5. 为什么JSP的内置对象不需要声明

    本文将通过对一个JSP运行过程的剖析,深入JSP运行的内幕,并从全新的视角阐述一些JSP中的技术要点. HelloWorld.jsp 我们以Tomcat 4.1.17服务器为例,来看看最简单的Hell ...

  6. zabbix-监控Linux服务器

    一.zabbix监控 1.关闭防火墙 [root@localhost ~]# systemctl stop firewalld [root@localhost ~]# systemctl disabl ...

  7. 为Eclipse指定JVM

    运行eclipse时,报如下错误时,可以通过修改配置文件eclipse.ini来解决. Version 1.4.1_01 of the JVM is not suitable for this pro ...

  8. jsp页面向后台传递 不赋值 传递的默认值

    <input type="hidden" name="leaderIdentity" value="${subject.leaderId }&q ...

  9. JSON 弹窗

    JSON和AJAX <script type="text/javascript"> $(document).ready(function(e) { var a = { ...

  10. cdoj1324卿学姐与公主

    地址:http://acm.uestc.edu.cn/#/problem/show/1324 卿学姐与公主 Time Limit: 2000/1000MS (Java/Others)     Memo ...