基于 Bootstrap Datetimepicker 联动
时间:2019-03-30
本文章向大家介绍基于 Bootstrap Datetimepicker 联动,主要包括基于 Bootstrap Datetimepicker 联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先看一下 层级联动的案例
先选择前面时间后 后面的时间不要超过前面的时间
先选择后面的时间后,前面的时间不要少于后面的时间
下面看封装代码
function initDateTimePicker(startTime, endTime, timeFormat, minview) { $(startTime).datetimepicker("remove"); $(startTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), format: timeFormat, startView: minview, minView: minview, }).on("changeDate", function() { var value = $(startTime).val(); $(endTime).datetimepicker("remove"); $(endTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), startDate: value, format: timeFormat, startView: minview, minView: minview, }) }); $(endTime).datetimepicker("remove"); $(endTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), format: timeFormat, startView: minview, minView: minview, }).on("changeDate", function() { var value = $(endTime).val(); $(startTime).datetimepicker("remove"); $(startTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: value, format: timeFormat, startView: minview, minView: minview, }) }); }
初始化datetimepicker及起止时间双向联动公共方法 startTime:起始时间输入框id号,例如:'#archiveStartTime'
endTime:结束时间输入框id号,例如:'#archiveEndTime' timeFormat
:时间格式,例如:'yyyy-mm-dd',
minview:最先显示时间 或者层级
总结
以上所述是小编给大家介绍的Bootstrap Datetimepicker 联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 全面进阶 H5 直播(上)
- 这年头,不会斗图都毕不了业?
- 龙妈也会死?《权力的游戏》 AI 算法预测丹妮女王危在旦夕
- 腾讯云 GAME-TECH 沙龙干货回顾:海外网络拓展及质量把控
- 通过扩展让ASP.NET Web API支持W3C的CORS规范
- 腾讯云GAME-TECH沙龙干货回顾:腾讯游戏云全球化实践
- 腾讯云GAME-TECH沙龙干货回顾:猎豹游戏出海经验分享
- 腾讯云GAME-TECH沙龙干货回顾:绿洲全球化案例分享
- 基于云计算的 CV 移动交互应用研究(1):CV交互+云计算
- ARKit 进阶:物理世界
- HLS 视频点播初探
- 周杰伦读心术背后的技术实现
- 盒子端 CSS 动画性能提升研究
- 把照片唱给你听 :腾讯 AI Lab 国际领先技术邀你「趣」体验
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 用百度接口实现图片文字识别,并打包成安装包软件
- 视野前端(二)V8引擎是如何工作的
- 【干货】Chrome插件(扩展)开发全攻略
- 超性感的React Hooks(一):为何她独具魅力
- 超性感的React Hooks(二)再谈闭包
- Python全栈(一)基础之11.函数(3)
- Python全栈(二)数据结构和算法之1.算法和数据结构引入
- Android开发(第一行代码 第二版) 常见异常和解决办法(基于Android Studio)(一)
- Python SQLite 基本操作和经验技巧(一)
- Python字典及基本操作(超级详细)
- Python matplotlab库使用方法及注意事项
- 超性感的React Hooks(三):useState
- 数据库编程 MySQL 技巧与经验
- Python 编程开发 实用经验和技巧
- 超性感的React Hooks(四):useEffect