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插件 autoComboBox 下拉框
Dec 22 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
js闭包实现按秒计数
Apr 23 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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 mysql数据库操作分页类
2008/06/04 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
详解如何较好的使用js
2016/12/16 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python paramiko模块的使用示例
2018/04/11 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
tensorflow如何批量读取图片
2019/08/29 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
营业经理岗位职责
2013/11/10 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
出差报告范文
2014/11/06 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers