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 相关文章推荐
splice slice区别
Oct 09 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue2实现provide inject传递响应式
May 21 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
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript中常用编程知识
2013/04/08 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
让python json encode datetime类型
2010/12/28 Python
Python抓取京东图书评论数据
2014/08/31 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
省级四好少年事迹材料
2014/01/25 职场文书
社区平安建设方案
2014/05/25 职场文书
工程进度款催款函
2015/06/24 职场文书