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里使用Dom操作Xml
Sep 20 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
javascript实现下拉菜单效果
Feb 09 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中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python 远程统计文件代码分享
2015/05/14 Python
Python 中的with关键字使用详解
2016/09/11 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
实习生岗位职责
2014/04/12 职场文书
任命书格式
2014/06/05 职场文书
企业精神口号
2014/06/11 职场文书
国庆节活动总结
2014/08/26 职场文书
小学数学教学反思范文
2016/02/16 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
python随机打印成绩排名表
2021/06/23 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL