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 编程引入命名空间的方法
Jun 29 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
AngularJS手动表单验证
Feb 01 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP闭包函数详解
2016/02/13 PHP
超级强大的表单验证
2006/06/26 Javascript
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python异常处理知识点总结
2019/02/18 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
国培教师自我鉴定
2014/02/12 职场文书
国培远程培训感言
2014/03/08 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
日语系毕业求职信
2014/07/27 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
培训班通知
2015/04/25 职场文书
个人更名证明
2015/06/23 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang