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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
简单的JS轮播图代码
Jul 18 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php自定义session示例分享
2014/04/22 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP chop()函数讲解
2019/02/11 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JavaScript 的继承
2011/10/01 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python 3 判断2个字典相同
2019/08/06 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
什么是URL
2015/12/13 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
土木工程应届生求职信
2013/10/31 职场文书
国旗下演讲稿
2014/05/08 职场文书
股指期货心得体会
2014/09/13 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
小学语文教学随笔
2015/08/14 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers