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. 使用maven搭建SSM框架

    使用maven搭建SSM框架,首先得准备好maven环境. 搭建maven环境 第一步:下载maven http://maven.apache.org/download.cgi 下载后解压就可以了. ...

  2. 巨蟒python全栈开发数据库攻略6:索引2&重要内容汇总

    1.索引的添加和删除 2.正确命中索引举例,explain优化神奇的简单使用 3.联合索引 4.简述慢日志记录 5.用户创建和权限分配 6.mysqldump逻辑备份,浅谈主从复制和读写分离 7.浅谈 ...

  3. Powershell Get File/Disk Size

    知识点: 1.获取路径中的文件夹:Get-ChildItem $startFolder  | Where-Object {$_.PSIsContainer -eq $True} | Sort-Obje ...

  4. Spoken English Practice( Nobody have the guts to tell Paul what a mistake he was taking.(call,come,gut,fortune,when it comes to))

    音标复习 绿色:连读:                  红色:略读:               蓝色:浊化:               橙色:弱读 口语蜕变(2017/6/24) If your ...

  5. kafka-docker----(how to setup http proxy in container??)

    https://github.com/wurstmeister/kafka-docker environment: KAFKA_ADVERTISED_HOST_NAME: 10.10.160.243 ...

  6. Linux基础服务

    作业一:nginx服务1.二进制安装nginx包 [root@bogon ~]# systemctl disable firewalld #关闭Firewalld自启动 Removed symlink ...

  7. 2015-03-18——mongodb的简单配置

    参考网址:http://www.cnblogs.com/mecity/archive/2011/06/11/2078527.html#3060056 mongod 数据库启动程序 mongo 数据库操 ...

  8. java中byte[] 和16进制字符串互转

    //将byte[]转换为16进制字符串 public static String byte2hex(byte[] b) { StringBuilder hs = new StringBuilder() ...

  9. oracle入门(3)——oracle服务解释

    [本文介绍] oracle不像mysql,安装后之后一个服务,如果mysql连接不上,打开其服务就行.oracle是有多个服务,哪些服务要开,哪些服务没必要开,对新手来说未必不是一个难点.下面对ora ...

  10. tornado下模板引擎的使用

    模板引擎 Tornado中的模板语言和django中类似,模板引擎将模板文件载入内存,然后将数据嵌入其中,最终获取到一个完整的字符串,再将字符串返回给请求者. Tornado =的模板支持“控制语句” ...