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 confirm()方法的使用方法实例
Jul 13 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python中GIL的使用详解
2018/10/03 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
教师个人的自我评价分享
2014/01/02 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
会计专业自荐书
2014/07/08 职场文书
作风建设年活动总结
2014/08/27 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
导游词之青岛崂山
2019/12/27 职场文书