bootstrap datetimepicker日期插件超详细使用方法介绍


Posted in Javascript onFebruary 23, 2017

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下

首先在文件头部引入必要的文件:

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" >
<script src="Js/bootstrap-datetimepicker.js"></script>

想用中文显示,加入bootstrap-datetimepicker.zh-CN.js文件

<script src="Js/bootstrap-datetimepicker.zh-CN.js"></script>

然后调用初始化日期插件方法:

$('.date').datetimepicker({
 language: 'zh-CN',//显示中文
 format: 'yyyy-mm-dd',//显示格式
 minView: "month",//设置只显示到月份
 initialDate: new Date(),//初始化当前日期
 autoclose: true,//选中自动关闭
 todayBtn: true//显示今日按钮
 })

引入控件

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详情及文件可以通过下面地址下载:http://www.bootcss.com/p/bootstrap-datetimepicker/

使用场景

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件,一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系。即开始日期不能大于结束日期,结束日期不能小于开始日期。

使用方法

两个时间输入域如图:

bootstrap datetimepicker日期插件超详细使用方法介绍

html代码

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

 js代码如下

<script type="text/javascript">
  $("#datetimeStart").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
  });
  $("#datetimeEnd").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
  });
</script>

 关于bootstrap插件datepicker,只选择年月;

<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/>
$(".form_datetime_2").
datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm',
autoclose: true,
todayBtn: true,
startView: 'year',
minView:'year',
maxView:'decade'
});

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

Javascript 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
Javascript的闭包详解
Dec 26 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
You might like
PHP原理之异常机制深入分析
2010/08/08 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python3多线程知识点总结
2019/09/26 Python
python实现logistic分类算法代码
2020/02/28 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
Python的collections模块真的很好用
2021/03/01 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
高级工程师英文求职信
2014/03/19 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python