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 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
七年级英语教学反思
2014/01/15 职场文书
大专生自荐书范文
2014/06/22 职场文书
2015年社区工作总结
2015/04/08 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
vue引入Excel表格插件的方法
2021/04/28 Vue.js
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python