Bootstrap datepicker日期选择器插件使用详解


Posted in Javascript onJuly 26, 2017

bootstrap是与jquery.js文件一起结合起来一起用的,缺少任何一个文件都不可以。

datepicker插件一般用于在文本框中选择日期,通过在表中选择日期,从而将日期显示在文本框中。因为datepicker.js默认是英文的,如果需要显示中文日期,则需要引入该插件的中文包。

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>日期选择器插件</title>
<!-- bootstrap是基于jquery开发的,所以通过bootstrap开发时需要引入jquery -->
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" rel="external nofollow" /> 
</head>
<body>
<h1>Hello, world!</h1>
<input type="text" id="date1" style="width:200px;height:27px;margin: 20px" placeholder='输入时间'>
<!-- 引入jquery.js文件 -->
<script type="text/javascript" src="plugins/jquery-2.2.3.min.js"></script>
<!-- 引入bootstrap.js文件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- 引入bootstrap日期选择器插件文件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<!-- 引入bootstrap日期选择器插件中文包 -->
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.zh-CN.js"></script>

<script type="text/javascript">
$("#date1").datepicker({autoclose:true});//当在日期表中选择完时间后日期表就会自动关闭
</script>
</body>
</html>

最后的效果图:

Bootstrap datepicker日期选择器插件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
javascript函数特点实例分析
May 14 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
js实现图片轮播效果学习笔记
Jul 26 #Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 #Javascript
vue上传图片组件编写代码
Jul 26 #Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 #Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 #Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 #Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 #Javascript
You might like
由php if 想到的些问题
2008/03/22 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
Python实现合并字典的方法
2015/07/07 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
年级组长自我鉴定
2014/02/22 职场文书
创先争优标语
2014/06/27 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers