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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
vue实现商城购物车功能
Nov 27 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python多分支if语句的使用
2020/09/03 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
端午节活动策划方案
2014/03/09 职场文书
股权投资意向书
2014/04/01 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
安全生产奖惩制度
2015/08/06 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
4种非常实用的python内置数据结构
2021/04/28 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python