bootstrap时间区间设置方法
我们在开发过程中经常有时间区间的要求,在多次"失败"及翻阅资料之后终于找到了适合我的方法,所以给大家分享出来.
基本需求为可以设置时间,设置时间区间,后一时间日期不可提前于前一时间日期.
需要引入:bootstrap-datepicker.js 和 bootstrap-datepicker.css (bootstrap-datepicker文件可从此链接下载:http://www.bootcss.com/p/bootstrap-datetimepicker/)
以及bootstrap的js和css...就自行下载引入吧.
其中日期的参数配置可以参考:http://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#methods
接下来就可以去编写代码了↓↓↓
首先是jsp代码:
1) 时间区间开始:
<tr>
<td><span class = "han"><center>执行开始日期:</center></span></td>
<td>
<div class = "input-append date form_datetime">
<input type="text" class = "m-wrap span3" readonly placeholder="开始日期" name = "startdate" value = "${spread.startdate }" id = "starttime" data-date-format="yyyy-mm-dd" size = "16"><span class = "add-on"><i class = "icon-calendar"></i></span>
</div>
</td>
</tr>
2) 时间区间结束
<tr>
<td><span class = "han"><center>维护结束日期:</center></span></td>
<td>
<div class = "input-append date form_datetime">
<input type="text" class = "m-wrap span3" readonly placeholder="结束日期" name = "enddate" value = "${spread.enddate }" id = "endtime" data-date-format="yyyy-mm-dd" size = "16"><span class = "add-on"><i class = "icon-calendar"></i></span>
</div>
</td>
</tr>
以上为jsp代码,其中样式可以自己去设置,接下来是<script>代码
/* 时间区间开始 */ $(function(){ $("#starttime").datetimepicker({
format:"yyyy-mm-dd",
showMeridian:true,
autoclose:true,
language:'en',
pickDate:true,
minView:2,
pickTime:true,
todayBtn:true
}).on('changeDate',function(ev){
var starttime=$('#starttime').val();
$('#endtime').datetimepicker('setStartDate',starttime);
$('#starttime').datetimepicker('hide');
}); $("#endtime").datetimepicker({
format:"yyyy-mm-dd",
showMeridian:true,
minView:2,
autoclose:true,
todayBth:true
}).on('chengeDate',function(ev){ var starttime=$('#starttime').val();
var endtime = $('#endtime').val(); if(starttime!=""&&endtime!=""){
if(!checkEndTime(starttime,endtime)){
$('#endtime').val('');
alert("开始时间要大于结束时间!");
return;
}
} $('#starttime').datetimepicker('setEndDate',endtime);
$('#starttime').datetimepicker('hide');
}); $('#starttime').datetimepicker('setEndDate',getCurentTime());
$('#endtime').datetimepicker('setStartDate',getCurentTime()); $('#starttime').val(getCurenTime());
$('#endtime').val(getCurenTime()); });
/* 时间区间结束 */
其中的参数可以根据自己的需求去更改.如写完没效果的话可以将<script>移入代码最下边.
参数配置可以参考:http://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#methods
bootstrap时间区间设置方法的更多相关文章
- win7限制登录时间的设置方法
win7使用Net User命令行语句限制登录时间的方法: 1.单击“开始”,然后单击“运行”. 2.在“打开”框中,键入cmd,然后单击“确定”. 3..键入 net user username / ...
- 解决ssh连接超时时间(ssh timeout)的设置方法
本文介绍下,linux中ssh连接超时时间的设置方法,以避免总是被强行退出.有需要的朋友,参考下吧.有关修改ssh连接超时时间的方法,网上介绍的很多了.比如下面这个:可以减少ssh连接超时等待的时间: ...
- My97设置开始、结束 时间区间及输入框不能输入只能选择的方法
时间区间开始: <input type="text" id = "first_time" name="first_time" valu ...
- session超时时间设置方法
session超时时间设置方法 由于session值之前没有设置,以至于刚登录的网站,不到一分钟就超时了,总结了一下,原来是session过期的原因,以下是设置session时间的3个方法: 1. 在 ...
- bootstrap时间插件 火狐不显示 完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
- 接口调试工具ApiPost的发送超时时间设置方法
有部分使用ApiPost的同学反应:发送接口调试时,响应超时时间设置的太短导致接口访问失败,怎么设置呢? 就连百度也有很多人在搜: 今天就来说一说. ApiPost简介: ApiPost是一个支持团队 ...
- bootstrap 时间控件带(时分秒)选择器
1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...
- pandas处理时间序列(2):DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术
一.时间序列基础 1. 时间戳索引DatetimeIndex 生成20个DatetimeIndex from datetime import datetime dates = pd.date_rang ...
- bootstrap 时间控件带(时分秒)选择器(需要修改才能显示,请按照参数说明后面的步骤进行修改)
1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...
随机推荐
- asp.net中http接口的开发
第一篇博客,如有不足请大家多多谅解. 最近一段时间主导着一个app的开发.所有功能都交给后台接口进行处理.采用http,传输的数据类型为json. http接口是一种基于基于TCP.http服务的ap ...
- Javascript的那些硬骨头:作用域、回调、闭包、异步……
终于到了神话破灭的时刻-- 这注定是一篇"自取其辱"的博客,飞哥,你们眼中的大神,Duang,这次脸朝下摔地上了. 故事得从这个求助开始:e.returnValue 报错:未定义, ...
- 20165230 《Java程序设计》第1周学习总结
20165230 2017-2018-2 <Java程序设计>第1周学习总结 教材学习内容总结 本周通过学习了解了java的历史,地位,特点以及java的应用和基本的开发步骤,对Java有 ...
- Harris Corner
Harris Corner网上已经有很多的资料了,但它也是我读研究生后读的第一篇论文,对我有一种特别的意义. 这篇文章我想从几个方面来讲解Harris Corner,一是Harris Corner的思 ...
- CSS(CSS3)选择器(2)
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...
- spring集成redis
redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列.redis官方没有提供windows版本的软件.windows版本 ...
- 【Python】 获取MP3信息replica
replica 初衷是想要整理iphone中的音乐.IOS(我自己的手机还是IOS8.3,新版本的系统可能有变化了)自带的音乐软件中所有音乐文件都存放在/var/mobile/Media/iTunes ...
- Sagit.Framework For IOS 开发框架入门教程5:消息弹窗STMsgBox
前言: 昨天刚写了一篇IT连创业的文章:IT连创业系列:产品设计之答题模块,(欢迎大伙关注!) 感觉好久没写IOS的文章了,今天趁机,来补一篇,Sagit的教程. Sagit 开源地址:https:/ ...
- Algorithm --> 二进制中1的个数
行文脉络 解法一——除法 解法二——移位 解法三——高效移位 解法四——查表 扩展问题——异或后转化为该问题 对于一个字节(8bit)的变量,求其二进制“1”的个数.例如6(二进制0000 0110) ...
- 手写ButterKnife
开发中使用注解框架可以极大地提高编码效率,注解框架用到的技术可以分为两种,运行时注解跟编译时注解.运行时注解一般配合反射机制使用,编译时注解则是用来生成模板代码.这里我们分别使用这两种方法实现Butt ...