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实现Sleep函数的代码
Mar 04 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
详解javascript函数写法大全
Mar 25 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
基于JS实现web端录音与播放功能
2019/04/17 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python安装教程
2018/02/28 Python
Python的多维空数组赋值方法
2018/04/13 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
大专学生推荐信范文
2013/11/19 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2014年妇女工作总结
2014/12/06 职场文书
会计人员岗位职责
2015/02/03 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
聊聊Python String型列表求最值的问题
2022/01/18 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫