Bootstrap日期和时间表单组件运用兼容ie8
准备动作先到下载Bootstrap日期和时间组件。
1:引入bootstrap.min.css,因为bootstrap-datetimepicker里面的很多样式依赖bootstarp的主样式,字体文件。
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
2:引入jq库,因为bootstarp基于jq.
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js" charset="UTF-8"></script>
3.引入bootstrap.min.js脚本
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
基本准备就绪,现在开始引入Bootstrap日期和时间表单组件相关文件。
4:引入日期主样式文件bootstrap-datetimepicker.min.css。
<link href="data/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
5:引入日期脚本bootstrap-datetimepicker.js。
<script type="text/javascript" src="data/bootstrap-datetimepicker.js" charset="UTF-8"></script>
6:引入日期翻译bootstrap-datetimepicker.zh-CN.js脚本,这里选择的是中文默认为英文。其他语言在locales文件中。
<script type="text/javascript" src="data/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
相关文件引入就绪,现在开始用日期组件。
7:HTML中指定要运用日期组件的标签
<input class="form-control" type="text" id="datetimepicker">
8:选项
初始化,要放在引入脚本的下面。默认选择值2014-12-30 13:15 ,日期--小时--分
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
language: 'zh-CN',
autoclose: 1,
// format:'yyyy:MM:dd',
// weekStart: 5,
// startDate:'2014:12:15',
// endDate:'2014:12:28',
// startView: 1,
// minView: 2,
// todayBtn:1,
// todayHighlight:1,
// keyboardNavigation:1,
// minuteStep:6,
// showMeridian: 1,
// forceParse: 0
});
</script>
language(设置控件显示语言):
'zh-CN':日期组件的语言为中文;
autoclose(这只选择时间后自动关闭组件):
默认或值为0选择值后都不自动关闭需要点击组件外围关闭组件。1=TRUE;0=FALSE;
format(设置日期格式):
'yyyy:MM:dd':指定显示日期格式 中文默认 yy-MM-dd hh:ii,格式, p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。默认情况下年月日时分全部显示就是通过下面的规则设定也会去当前默认值,这时需要 format来设定自己需要的显示的时间比如我只想要 月和日则可以可设定format:'MM:dd',
weekStart(设置每周从星期几开始):
5, 视图选择的一周从星期几开始算起,0周日 1到6周一到周六,默认周日
startDate(设定不在范围前的时间禁用):
这个值要设置的,不然时间就从1899开始的。
'2014:12:15':设定不在范围内的禁用。指定一个最早可以选择的时间,指定时间之后的可以选择,指定时间之前的将禁用。注意,设置的时间格式要和前面的或者默认的一致。 startDate: '-3d',取当前值以上3个外的之前不能选择。startDate:
'-0d',当前日期以前的禁用。
endDate(不在范围后的时间禁用):
'2014:12:28':设定不在范围内的禁用。指定一个最晚可以选择的时间,指定时间之前的可以选择,指定时间之后的禁用。注意,设置的时间格式要和前面的或者默认的一致。 endDate:
'+0d',当前日期以后的禁用。
startView(控件打开从那个时间段开始):
1,日期选择器打开后从什么视图开始选择,值为0到4。0为一个小时60分钟,1为一天24个小时,2为一月30日,3为一年12个月,4当前年份的前后年。0为直接选择分钟其他默认,1选择小时到分,2:选择日小时分钟,3:选择月日小时分钟,4:选择年月日时分。默认为2”月“。概括:0:分钟开始,1:小时,2:日,3:月,4:年
minView(最少显示多小个时间段):
2:日期选择器过滤倒数几个可选择视图,没有设置startView(默认为2)的时候,2倒数两个不可选择,1倒数一个不可选择,0全部可选择,若设定了startView(年月日时分开始),比如设定startView:4;则0从startView选择到尾,1倒数第一个不能选择即分钟不能选择采用默认的,2倒数两个不能选择即时分不能选择,3倒数3个不能选择即日时分不能选择,4:倒数四个不能选择即月日时分不能选择,不能选择都的用默认值。概括:0全部可选,1倒数一个,2倒数两个,3倒数3个,N倒数n个。minView选择的值<=startView所设定的值,>startView都当=的作用也就是都只能选择一个。
todayBtn(是否出现当前时间按钮):
1,提供当天时间按钮供点击1=TRUE,默认0=FALSE。管网说如果是"linked",当天日期将会被选中,但是我这里用了效果和设置为1的一致。
todayHighlight(当前时间高亮):
1,1=TRUE当你选择一个日期后再次点击出现视图会高亮显示当前时间和你选择的时间,默认为FALSE,只高亮你选择了的时间。
keyboardNavigation(是否可以通过键盆选择时间):
1,1=TRUE,是否允许通过键盘方向键和回车键来进行时间的选择,默认为TRUE。
minuteStep(分钟间隔):
6,默认为5,设置分钟的间隔,默认为每5分钟间隔一次。
showMeridian(上下午有线分隔):
1 ,1=true,是否显示划分上午或下午。
forceParse(纠正用户输入错误):
0:当用户输入有错误的时间值时,组件会自动解析更正日期,并将解析后的正确值按照给定的格式format设置到输入框中。
最后说明下这种情况:
出现 中文的七,这里想要数字,请打开翻译文件bootstrap-datetimepicker.zh-CN.js
这是之前直接引用的翻译文件,现在来修改下。
months:视图中的月份显示;
monthsShort:选择后input中的月份显示;
修改后
;(function($){
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};
}(jQuery));
效果
综上:比如我现在只设置一个只能给人选择月份和日期并且在input中也只显示月份和日期的
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
language: 'zh-CN',
autoclose: 1,
format:'MM:dd',
startView: 3,
minView:2,
});
</script>
结果
9:常用方法:
$('#datetimepicker').datetimepicker('remove'):移除日期组件和相关绑定事件。
$('#datetimepicker').datetimepicker('show')“显示日期组件。
10:常用事件:
<script type="text/javascript">
$('#datetimepicker').datetimepicker()
.on('changeDate', function(ev){
alert(888)
});
</script>
changeDate:每次日期被改变的时候触发。
<script type="text/javascript">
$('#datetimepicker').datetimepicker()
.on('show', function(ev){
alert(888)
});
</script>
'show':当日期视图第一次出现的时候触发。
<script type="text/javascript">
$('#datetimepicker').datetimepicker()
.on(hide, function(ev){
alert(888)
});
</script>
'hide':当日期视图隐藏的时候触发。
outOfRange
当用户选择的日期超出startDate 或endDate 时,或者通过setDate 或 setUTCDate方法设置日期超出范围时被触发。
值得一提的是,用户选择的时间日期存储在input的value中,想要获取只要$(”#yourinput”).val()就可以了
关于bootstrap-datetimepicker.js不支持IE8的解决办法
直接用官网上的下载的控件,在IE8下面是没有效果的,提示的脚本错误是说bootstrap-datetimepicker.js脚本里不支持indexOf()这个方法。
我的解决方法是在bootstrap-datetimepicker.js的前面加上以下代码:
(在使用indexOf方法前,执行一下下面的js, 原理就是如果发现数组没有indexOf方法,会添加上这个方法。)
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0; var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len; for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
插入位置效果图
推荐资源:
参考文献
http://www.bootcss.com/p/bootstrap-datetimepicker/
http://bootstrap-datepicker.readthedocs.org/en/release/
Bootstrap日期和时间表单组件运用兼容ie8的更多相关文章
- 自定义上传控件(兼容IE8)
上传控件是 <input type="file"/> 而实际开发过程中,都会自定义一个控件,因为这个控件本身难看,而且不同浏览器效果不一样. 如IE8显示如下: 谷歌浏 ...
- 日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。
参考链接:http://www.bootcss.com/p/bootstrap-datetimepicker/ 1.官网以及很详细的说明了如何使用,这里结合一下自己的使用来写下. 下载解压缩包以后,可 ...
- Bootstrap日期和时间表单组件
http://www.bootcss.com/p/bootstrap-datetimepicker/ 项目 MarketPoint
- bootstrap日期控件(双日期、清空等问题解决)
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- Bootstrap 3兼容IE8浏览器(转)
Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...
- Bootstrap 3 兼容 IE8 浏览器
公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...
- Flex自定义组件开发之日周月日期选择日历控件
原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...
随机推荐
- 使用jprofiler8远程监控weblogic的配置方法
jprofiler8的注册码:L-Larry_Lau@163.com#36573-fdkscp15axjj6#25257 未完待续
- AJAX 数据库实例
AJAX 用于创建动态性更强的应用程序. AJAX ASP 实例 下面的例子将演示当用户在输入框中键入字符时,网页如何与服务器进行通信: 实例 请在下面的输入框中键入字母(A - Z): 姓名: 建议 ...
- test if DEMO
可参考:http://blog.chinaunix.net/uid-20671208-id-3643362.html 1.test 举例: test -d ~/auto && echo ...
- 八大排序算法之三选择排序—简单选择排序(Simple Selection Sort)
基本思想: 在要排序的一组数中,选出最小(或者最大)的一个数与第1个位置的数交换:然后在剩下的数当中再找最小(或者最大)的与第2个位置的数交换,依次类推,直到第n-1个元素(倒数第二个数)和第n个元素 ...
- 移动端web出现的一系列问题
今天做移动端的web,在做后期处理的时候,发现了非常多的问题.下面我分别列举一下吧~~ 1.移动端浏览器众多,各种浏览器之间的显示等都有差异,很多需要单独处理,于是我需要判断分别是什么浏览器.js代码 ...
- Unix下五种IO模型
http://blog.chinaunix.net/uid-25324849-id-247813.html 1. I/O模型 Unix下共有五种I/O模型 a. 阻塞I/O b. 非阻塞I/O c. ...
- Python网络爬虫Scrapy框架研究 以及 代理设置
地址:https://github.com/yidao620c/core-scrapy 例子:https://github.com/geekan/scrapy-examples 中文翻译文档: htt ...
- 将具有关联关系的两个表从hibernate查询出来转成json对象时报错
第一篇文章: 相信大家做过JSON相关的东西对这个异常并不陌生,这个异常是由于JSONObject插件内部会无限拆解你传入的对象,直到没有可拆解为止,问题就在这,如果你传入的对象有外键关系,或者相互引 ...
- HDU 4920 Matrix multiplication 矩阵相乘。稀疏矩阵
Matrix multiplication Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/ ...
- 2016 Al-Baath University Training Camp Contest-1 J
Description X is fighting beasts in the forest, in order to have a better chance to survive he's gon ...