BootStrap的Datepicker控件使用心得分享


Posted in Javascript onMay 25, 2016

2013年Bootstrap火了,2014年Bootstrap将继续受到更多人的喜欢,它不仅拥有一套完整漂亮的UI,而且爱好者们为其开发扩展了很多有用的插件和主题!让其拥有无限可能!

公司喜欢使用各种开源免费的框架,bootstrap就非常好用,而且框架布局很漂亮,用起来也很简单。今天遇到要使用它的datepicker这个控件。

问题是:两个时间点,分为开始时间和结束时间,结束时间必须在开始时间之后。于是一顿研究,从上午研究到3点才解决问题。

总结了一下问题所在。主要原因是项目里用的jquery,也用了jquery ui,碰巧它里面也有一个datepicker,名字一模一样。一直折腾啊,在查jquery的datepicker用法,在网上找了各种说是好使的,就是对datepicker绑定onSelect方法。恰巧的是,很多网友都说onSelect不起作用....

突然灵光一现,发现lib文件夹下一堆bootstrap的东西,更重要的是还有一个文件夹上写着bootstrap_datepicker巴拉巴拉的,才醒悟,我们用的不是jquery下的datepicker。⊙?⊙b汗

直接贴代码:

js代码

$('#starttime').datepicker({
format: 'yyyy.mm.dd',
weekStart: 1,
autoclose: true,
todayBtn: 'linked',
language: 'zh-CN'
}).on('changeDate',function(ev){
var startTime = ev.date.valueOf();
if(start<teach){
alert("“评估开始时间 ”不能早于“授课时间 ” !");
$("#starttime").focus();
}
});
$('#endtime').datepicker({
format: 'yyyy.mm.dd',
weekStart: 1,
autoclose: true,
todayBtn: 'linked',
language: 'zh-CN'
}).on('changeDate',function(ev){
var endTime = ev.date.valueOf();
end = endTime;
if(end<start){
alert("“评估结束时间 ”不能早于“评估开始时间 ” !");
}else{
}
});

jsp代码:

<div id="starttime_main" class="control-group">
<label class="control-label" for="starttime">开始时间:</label>
<div class="date form_datetime controls" data-date="2013.05.10" id="starttimeDiv">
<input type="text" class="span9" value="" id="starttime" readonly> 
<span class="add-on">
<i class="icon-calendar"></i> 
</span>
</div>
</div>
<div id="endtime_main" class="control-group">
<label class="control-label" for="endtime">结束时间:</label>
<div class=" controls date form_datetime"
data-date="2013.05.10" id="endtimeDiv">
<input type="text" class="span9" value="" id="endtime"
readonly> <span class="add-on"><i
class="icon-calendar"></i> </span>
</div>
</div>

以上所述是小编给大家介绍的BootStrap的Datepicker控件使用心得分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
jquery按回车键实现表单提交的简单实例
May 25 #Javascript
Javascript之BOM(window对象)详解
May 25 #Javascript
jQueryUI中的datepicker使用方法详解
May 25 #Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 #Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 #Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 #Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 #Javascript
You might like
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
基于vue实现分页效果
2017/11/06 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Flask处理Web表单的实现方法
2021/01/31 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
企业管理部经理岗位职责
2013/12/24 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
六一亲子活动总结
2014/07/01 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
先进党组织事迹材料
2014/12/26 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
党支部培养考察意见
2015/06/02 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书