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') ...
随机推荐
- Powershell & SQL
一.使用Powershell插入数据到SQL中 1.方法一 $ServerName=xxx $Database=xxx $UserID=xxx $Pwd=xxx $conn=new-object Sy ...
- Log4j 2
Log4j – Apache Log4j 2 - Apache Log4j 2 http://logging.apache.org/log4j/2.x/ Apache Log4j 2 Apache L ...
- 国内java,oa,weixin opensource framework www.jeecg.org
Soap/rest 为API生,为框架死,为Debug奋斗一辈子!吃符号的亏,上大小写的当,最后死在需求上!
- python类的相关知识第一部分
一.类的相关概念 (1).什么是类 具有同种属性的对象称为类,是个抽象的概念.比如说:汽车.人.狗.神: (2).什么是对象或实例 日常生活中的所有东西都是对象,是类的实例化.比如说:推土车是汽车的实 ...
- CSS 快速入门
特点: CSS 将网页内容和显示样式进行分离,提高了显示效果的功能. CSS 和 html 相结合的四种方式: style 属性的方式 每个 html 标签中都有一个 style 样式属性, 该属性的 ...
- 棣小天儿的第一个python程序
根据给定的年月日,以数字形式打印出日期 months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'Augu ...
- 基于Requests和BeautifulSoup实现“自动登录”
基于Requests和BeautifulSoup实现“自动登录”实例 自动登录抽屉新热榜 #!/usr/bin/env python # -*- coding:utf-8 -*- import req ...
- python单线程解决并发
1.单线程解决并发 方式一 import socket import select # 百度创建连接:非阻塞 client1 = socket.socket() client1.setblocking ...
- The Unreasonable Effectiveness of Recurrent Neural Networks (RNN)
http://karpathy.github.io/2015/05/21/rnn-effectiveness/ There’s something magical about Recurrent Ne ...
- Authentication Overview
Authentication Overview Service accounts User accounts API keys