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 相关文章推荐
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Vue.use源码分析
Apr 22 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
vue实现下拉菜单树
Oct 22 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
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
python中cPickle用法例子分享
2014/01/03 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python读取xml文件方法解析
2020/08/04 Python
pandas针对excel处理的实现
2021/01/15 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
二手房买卖协议书
2014/04/10 职场文书
和解协议书
2014/04/16 职场文书
伦敦奥运会口号
2014/06/13 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS