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 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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实现将GB编码转换为UTF8
2006/11/25 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python 布尔操作实现代码
2013/03/23 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Django入门使用示例
2017/12/12 Python
Django REST framework视图的用法
2019/01/16 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
数据库专业英语
2012/11/30 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
护士实习自我鉴定
2013/10/22 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
信访工作经验交流材料
2014/05/23 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
淘宝客服工作职责
2014/07/11 职场文书
八项规定整改方案
2014/10/01 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
为自己工作观后感
2015/06/11 职场文书
六年级情感作文之500字
2019/10/23 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS