bootstrap日历插件datetimepicker使用方法


Posted in Javascript onDecember 14, 2016

如何使用bootstrap日历datetimepicker插件?

一、引入文件

1、css样式

<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

2、js文件

<script type="text/javascript" src="/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

二、 布局代码

1、 布局代码:

<div class="input-group date form_date col-sm-2 col-md-2 col-lg-2 floatLeft" data-date="" data-date-format="dd MM yyyy" data-   link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" id="birthdays" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
 </div>

三、js调用代码:

$(function (){
/* 主要为:startView: 2,
 maxViewMode: 1,
 minViewMode:1,
 这三个参数,第一个表示起始选择范围,0为日,1为月,2为年,
 第二个参数表示最大选择范围,
 第三个表示最小选择范围。数字意义同第一个参数。
*/
  //选择年的 startView: 4, minView: 4, format: 'yyyy', 
$('.form_date').datetimepicker({
format: 'yyyy', 
startView:4, 
minView:4,
language: 'zh-CN' ,
forceParse: false, 
autoclose:true,
  pickerPosition: "bottom-left" 
  });
 //可选择年月日
  $('.form_date').datetimepicker({
  language: 'zh-CN',
  minView: 'month', 
  format: 'yyyy-mm-dd',
  autoclose: true,
 startView: 2,
  showMeridian: 1,
  pickerPosition: "bottom-left"
 });
});

手册地址:http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#startdate

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 函数式编程的原理
Oct 16 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
react中Suspense的使用详解
Sep 01 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 #Javascript
实例解析Array和String方法
Dec 14 #Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 #Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 #Javascript
浅谈Javascript中的Label语句
Dec 14 #Javascript
详解jQuery中基本的动画方法
Dec 14 #Javascript
浅析上传头像示例及其注意事项
Dec 14 #Javascript
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
javascript之ESC(第二类混淆)
2007/05/06 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
用Python配平化学方程式的方法
2019/07/20 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
平面设计师的工作职责
2013/11/21 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书