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 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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 Try Catch异常测试
2009/03/01 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
深入理解PHP中的global
2014/08/19 PHP
javascript 跳转代码集合
2009/12/03 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
分享6个隐藏的python功能
2017/12/07 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
社区禁毒工作方案
2014/06/02 职场文书
计算机软件专业求职信
2014/06/10 职场文书
社会实践活动报告
2015/02/05 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
如何Python使用re模块实现okenizer
2022/04/30 Python