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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
轮播图组件js代码
Aug 08 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
js利用iframe实现选项卡效果
Aug 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
PHP的变量总结 新手推荐
2011/04/18 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
SQL中where和having的区别
2012/06/17 面试题
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
shell程序中如何注释
2012/02/17 面试题
教师求职推荐信范文
2013/11/20 职场文书
大学军训感言
2014/01/10 职场文书
自主实习接收函
2014/01/13 职场文书
工会主席岗位责任制
2014/02/11 职场文书
动物科学专业求职信
2014/07/27 职场文书
三年级学生评语大全
2014/12/26 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android