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 原型继承介绍
Aug 30 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
模仿OSO的论坛(三)
2006/10/09 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python实现的归并排序算法示例
2017/11/21 Python
python实现随机梯度下降法
2020/03/24 Python
详解Python 切片语法
2019/06/10 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
投标承诺书范本
2014/03/27 职场文书
大学生村官承诺书
2014/03/28 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
中秋节寄语2015
2015/03/24 职场文书
汉字听写大会观后感
2015/06/12 职场文书