bootstrap datetimepicker2.3.11时间插件使用


Posted in Javascript onNovember 19, 2016

本文实例为大家分享了bootstrap datetimepicker使用方法,供大家参考,具体内容如下

时间插件之结束时间不能小于开始时间

changeDate: function (starttime,stoptime) {      //判断时间的大小弹窗提示用户
 var _t = this;
  if(stoptime != '' && starttime != ''){
   if(stoptime < starttime){
    $('#stop-date').val('');
    $('#time').modal('show');
    setTimeout(function(){($('#time').modal('hide'))},3000);
    return;
   }
  }
 },
timeDatapicker:function () {
  var _t = this;           //this
  var startDate = $('#start-date'),      //开始时间
   stopDate = $('#stop-date');       //结束时间

  startDate.datetimepicker({
   format: 'yyyy-mm-dd',
   autoclose: true,
   minView: 2,
   language:'zh-CN'
  }).on('change',function () {       //changeData方法写在change之后,是为了防止changeData有changge方法(避免冲突)
   var starttime = startDate.val();
   var stoptime = stopDate.val();
   _t.changeDate(starttime,stoptime);
   stopDate.datetimepicker('setStartDate',starttime); //结束时间的选择将以选择的开始时间为依据从新设置(等于开始 时间)

  }).on('changeDate',function () {
   var starttime = startDate.val();
   stopDate.datetimepicker('setStartDate',starttime); //结束时间的选择将以选择的开始时间为依据从新设置(等于开始 时间)
   var stoptime = stopDate.val();
  });

  stopDate.datetimepicker({
   format: 'yyyy-mm-dd',
   autoclose: true,
   minView: 2,
   language:'zh-CN'
  }).on('change',function () {
   var starttime = startDate.val();
   var stoptime = stopDate.val();
   _t.changeDate(starttime,stoptime,$(this));

  }).on('changeDate',function () {

   var starttime = startDate.val();
   var stoptime = stopDate.val();
   startDate.datetimepicker('setEndDate',stoptime);
   stopDate.datetimepicker('setStartDate',starttime);
  });

 },

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

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

Javascript 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
如何提高Dom访问速度
Jan 05 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Vue实现简易计算器
Feb 25 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
js 定位到某个锚点的方法
Nov 19 #Javascript
js 模仿锚点定位的实现方法
Nov 19 #Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 #Javascript
js 中获取制定的cook信息实现方法
Nov 19 #Javascript
微信小程序入门教程
Nov 18 #Javascript
网络传输协议(http协议)
Nov 18 #Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 #Javascript
You might like
php str_replace的替换漏洞
2008/03/15 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
js中function()使用方法
2013/12/24 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python如何生成树形图案
2018/01/03 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
五年级科学教学反思
2014/02/05 职场文书
读书活动总结范文
2014/04/26 职场文书
《全神贯注》教学反思
2016/02/22 职场文书