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 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 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入门速成(2)
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
htm调用JS代码
2007/03/15 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
详解Python设计模式之策略模式
2020/06/15 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
基于opencv实现简单画板功能
2020/08/02 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
大学在校生求职信范文
2013/11/21 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
高三学习决心书
2014/03/11 职场文书
监察建议书格式
2014/05/19 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
运动会广播稿200字
2015/08/19 职场文书
导游词之广西漓江
2019/11/02 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技