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匿名函数
Nov 25 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
详解express使用vue-router的history踩坑
Jun 05 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 获取可变函数参数的函数
2009/08/26 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
flexigrid 参数说明
2010/11/23 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
全面理解Python中self的用法
2016/06/04 Python
Python线程指南分享
2019/11/19 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
三个Unix的命令面试题
2015/04/12 面试题
销售顾问的岗位职责
2013/11/13 职场文书
采购文员岗位职责
2013/11/20 职场文书
职工趣味运动会方案
2014/02/10 职场文书
卖房协议书
2014/04/11 职场文书
听课评语大全
2014/04/30 职场文书
环保倡议书300字
2014/05/15 职场文书
学习雷锋标语
2014/06/25 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
费城故事观后感
2015/06/10 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技