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 相关文章推荐
js substr、substring和slice使用说明小记
Sep 15 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
JavaScript代码简化技巧实例解析
Sep 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分割合并两个字符串的函数实例
2015/06/19 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python打包多类型文件的操作方法
2020/09/21 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
异常和异常类的概念
2014/09/12 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
实习生求职自荐信
2014/02/07 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
教师个人发展总结
2015/02/11 职场文书
祝酒词范文
2015/08/12 职场文书
给学校的建议书400字
2015/09/14 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
讨论nginx location 顺序问题
2022/05/30 Servers