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 相关文章推荐
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
利用JS实现数字增长
Jul 28 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
详解uniapp的全局变量实现方式
Jan 11 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中include与require使用方法区别详解
2013/10/19 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP chop()函数讲解
2019/02/11 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
JS中操作JSON总结
2020/12/06 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python修改字典键(key)的方法
2019/08/05 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
PyTorch预训练的实现
2019/09/18 Python
Python中的延迟绑定原理详解
2019/10/11 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python 制作磁力搜索工具
2021/03/04 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
保护环境的建议书
2014/03/12 职场文书
Python 文字识别
2022/05/11 Python