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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
javascript String 对象
Apr 25 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
js代码实现轮播图
May 04 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
Vue Element UI自定义描述列表组件
May 18 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中实现记住密码自动登录的代码
2011/03/02 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
xtree.js 代码
2007/03/13 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
python中join()方法介绍
2018/10/11 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
应届生护士求职信
2013/11/01 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
项目建议书格式
2014/03/12 职场文书
员工安全责任书范本
2014/07/24 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
python可视化之颜色映射详解
2021/09/15 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers