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. finereport---FineReport入门常见疑难点

    一.入门介绍 二.入门需知 注意:开发人员可以设置DEBUG级别,有助于测试 三.数据准备 数据集sql中可以使用参数宏${}动态地生成过滤条件,${}中的语句在FineReport报表中执行,将${ ...

  2. Spoken English Practice(I'm gonna do something I never thought I'd be able to)

    绿色:连读:                  红色:略读:               蓝色:浊化:               橙色:弱读     下划线_为浊化 口语蜕变(2017/7/6) 英 ...

  3. filezilla 读取目录失败

    用到FTP,本来一直用主动模式,可以最近老是读取目录失败,425 Can't open data connection 和 读取目录列表失败(搞了好久,一天) 问题解决 这个问题主要是由于使用Pass ...

  4. 【python】-- 类的创建、__new__、__metaclass___

    类的创建 前面的随笔都是关于类的知识,通过类创建对象,那这个类到底是怎么产生的呢? 1. 传统创建类 class Foo(object): def __init__(self,name): self. ...

  5. A4纸网页打印中对应像素的设定和换算

    最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot PerInch)指标.  经过我仔细的测试,发现了网页打印中,默认采用 ...

  6. 并行求pi (C++实现)

    用OpenMP并行化求pi的代码,这里用的是公式法求pi.具体如下: //公式法 #include<omp.h> #include<stdio.h> #include<s ...

  7. C#前后端交互

    后台接收 方式1: Request.Form[""] post Request.QueryString[""] get System.Web.HttpConte ...

  8. WCF RIA SERVICE相关技术

    WCF RIA SERVICE实体属性拷贝 private void DoSubmit() { ((IEditableObject)this.RepairContract).EndEdit(); va ...

  9. 错误:为 Web 项目“XXX”配置的 URL“http://localhost/”的网站同时存在于本地 IIS Web 服务器和 IIS Express Web 服务器上。您需要使用 IIS 管理器在 IIS 中更改此网站的绑定。

    解决方法: 用记事本打开MVC网站的项目文件(*.csproj),滚动条拉到最下,找到这两个节点: <UseIIS>True</UseIIS> <AutoAssignPo ...

  10. JVM(4) 虚拟机性能监控与故障处理工具

    1. Sun JDK 监控和故障处理工具 1)jps:JVM process Status Tool,显示指定系统内所有的HotSpot虚拟机进程.可以列出正在运行的虚拟机进程,并显示虚拟机执行主类( ...