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 的 trim 函数的代码
Aug 13 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
JS动画定时器知识总结
Mar 23 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
js实现随机数小游戏
Jun 28 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数据库密码的找回的步骤
2011/01/12 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
帝国cms目录结构分享
2015/07/06 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
浅析Python中的多重继承
2015/04/28 Python
Python实现数据库编程方法详解
2015/06/09 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python continue继续循环用法总结
2018/06/10 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python如何制作缩略图
2019/04/30 Python
六行python代码的爱心曲线详解
2019/05/17 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
python3实现飞机大战
2020/11/29 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
初中生物教学反思
2016/02/20 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL