Bootstrap每天必学之日期控制


Posted in Javascript onMarch 07, 2016

一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的,

控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

GitHub上开源地址:https://github.com/smalot/bootstrap-datetimepicker

在使用datetimepicker之前,先要经过以下几个步骤

1、引用JS脚本库

<script src="/Content/bootstraps/js/bootstrap.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>

其中bootstrap-datetimepicker.zh-CN.js表示可以使用中文的语言显示日期时间

2、引入CSS类库

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

3、定义HTML标签

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">

4、编写datetimepicker事件

<script type="text/javascript">
 $(".form_datetime").datetimepicker({
 format: "yyyy-mm-dd",
 autoclose: true,
 todayBtn: true,
 todayHighlight: true,
 showMeridian: true,
 pickerPosition: "bottom-left",
 language: 'zh-CN',//中文,需要引用zh-CN.js包
 startView: 2,//月视图
 minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
 }); 
</script>

注意,有很多朋友都在网上问过,如何只用日期,或者不用时间,因为默认情况下,每次使用datetimepicker选择时,都要选到日间那个级别上,很是不爽,大叔在研究中发展,使用minView这个参数解决了这个问题,它相当于在控制上,最小的显示精度,

0表示分钟(默认),1表示小时,而2表示天,我们把值设为2就不会再出现选择小时的页面了!

Bootstrap每天必学之日期控制

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
Vuex的实战使用详解
Oct 31 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 #Javascript
jquery+json实现分页效果
Mar 07 #Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 #Javascript
基于jquery编写分页插件
Mar 07 #Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 #Javascript
javascript特殊日历控件分享
Mar 07 #Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 #Javascript
You might like
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python求列表交集的方法汇总
2014/11/10 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
django ORM之values和annotate使用详解
2020/05/19 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
产假请假条
2014/04/10 职场文书
实验心得体会
2014/09/05 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang