当前位置:首页 > 日记 > 正文

基于 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 联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

ps怎么绘制一副电路板图特效?

ps怎么绘制一副电路板图特效?

绘制,电路板,特效,电脑软件,ps,ps具有强大的图片编辑功能,这次小编就为大家分享一下如何用ps制作电路板特效软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先。打开ps,然后新建一个文档。大小为1366…

jquery select插件异步实时搜索实

jquery select插件异步实时搜索实

实时搜索,插件,异步,实例代码,电脑软件,一、先看看效果。二、做此插件的原因。1.数据量过大(几千、几万条),无法一次性全部加载。2.现有插件各不相同,无法满足功能需求。3.美观性,可控性不足。三、如何使用。1.html和js<select id="unit"></se…

excel2007没保存怎么办excel2007没

excel2007没保存怎么办excel2007没

方法,恢复,数据,显示,步骤,  现在使用Excel 2007的人越来越多,但其中的使用方法和诀窍需要在实践中慢慢体会和总结,有时一项很简单、快捷的操作却能给办公人员带来工作效率极大的提升,下面就教你在没有保存Excel文件时,却把它关闭的情况下,怎…

excel使用函数公式的操作步骤

excel使用函数公式的操作步骤

函数,公式,操作步骤,电脑软件,excel,  函数公是excel中比较常用到的,Excel中的函数公式具体该如何操作呢?不太了解的朋友可以看看以下教程,希望对你学习excel函数公式有所帮助!excel使用函数公式的操作步骤 函数公式操作步骤1:通过excel可以…

react 父组件与子组件之间的值传递

react 父组件与子组件之间的值传递

组件,值传递,方法,与子,电脑软件,概念上,组件是封闭的环境。React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事。以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据。那么子组件要如何与父组件沟通这件事,简单的…

ps中怎么制作另类花边文字字体效果

ps中怎么制作另类花边文字字体效果

字体,文字,花边,另类,效果,我们时常会在一些报刊、杂志看过花边字,其主要是起到点缀、烘托的效果。以下小编&ldquo;林曌乐园&rdquo;便为你分享如何通过PS软件制作花边字,希望能帮到你。软件名称:Adobe Flash Professional CS5 官方简体中文完…

photoshop画布如何调整?PS画布大小

photoshop画布如何调整?PS画布大小

设置,方法,调整,大小,电脑软件,photoshop 一款强大测处理软件,通过这款软件可以进行图片处理,也可以进行图片的创作!在创作图片的时候,首先要先对图片的画布进行规划,万一创作到一半发现画布太小,就需要对画布调整,下面就为大家介绍PS画布大小设置…

node.js学习之事件模块Events的使

node.js学习之事件模块Events的使

学习,模块,事件,示例,电脑软件,前言本文主要给大家介绍了关于node.js事件模块Events使用的一些示例,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。环境:Node v8.2.1; Npm v5.3.0; OS Windows101、 Node事件介绍Node大多数核…

Node.js 使用流实现读写同步边读边

Node.js 使用流实现读写同步边读边

读写,同步,功能,电脑软件,Node,废话不多说了,直接给大家贴代码了,具体代码如下所示://10个数 10个字节,每次读4b,写1blet fs=require("fs");function pipe(source,target) { //先创建可读流,再创建可写流 //先读一次,rs.on(data) //将读到的…

Angular.js中下拉框实现渲染html的

Angular.js中下拉框实现渲染html的

方法,下拉框,电脑软件,Angular,js,前言大家都知道angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击。但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框代码如下:<body ng-app="app" ng-controller="cont…

微信小程序实现tab切换效果

微信小程序实现tab切换效果

效果,程序,电脑软件,微信小,tab,微信小程序之tab切换效果,如图:最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能).wxml代码:<view class="body"> <view class="na…

如何将ps软件进行汉化

如何将ps软件进行汉化

方法,汉化,如何将,电脑软件,ps,  ps软件相信你很多同学都知道还有别的语言版本,如果下载的不是汉语可以进行汉化的。但是很多同学还不太清楚。那么接下来下面是小编整理的一些关于如何将ps软件进行汉化,供您参阅。将ps软件进行汉化的方法首…