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 动态调整图片尺寸实现代码
Dec 28 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
js中this对象用法分析
Jan 05 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 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循环输出数据库内容的代码
2008/05/24 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP微信分享开发详解
2017/01/14 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
jquery radio 操作代码
2011/03/16 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue数组对象排序的实现代码
2018/06/20 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Django跨域请求问题的解决方法示例
2018/06/16 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Python实现自动整理文件的脚本
2020/12/17 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
学生处主任岗位职责
2013/12/01 职场文书
计生专干事迹
2014/05/28 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
立项申请报告范本
2015/05/15 职场文书
师范生小学见习总结
2015/06/23 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
golang中的并发和并行
2021/05/08 Golang