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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
python如何操作mysql
2020/08/17 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
《小熊住山洞》教学反思
2014/02/21 职场文书
高级工程师英文求职信
2014/03/19 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
教师自我剖析材料
2014/09/29 职场文书
干部考察材料范文
2014/12/24 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers