当前位置: 首页 > 编程笔记 >

bootstrap datetimepicker2.3.11时间插件使用

祁绪
2023-03-14
本文向大家介绍bootstrap datetimepicker2.3.11时间插件使用,包括了bootstrap datetimepicker2.3.11时间插件使用的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了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个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue使用laydate时间插件的方法,包括了vue使用laydate时间插件的方法的使用技巧和注意事项,需要的朋友参考一下 之前在做vue项目时使用iviewUI库中的DatePicker组件,发现DatePicker使用起来比较麻烦,尤其是对时间精确度上的限制不尽人意,操作起来也比较繁琐,总之在处理一系列时间组件相互联动上存在一大堆问题,比如 DatePicker时间组件 时间精

  • 本文向大家介绍js时间查询插件使用详解,包括了js时间查询插件使用详解的使用技巧和注意事项,需要的朋友参考一下 我从同事那拿来一个时间查询的插件,先记录下来: 首先要引入js文件和css文件,因为我用到了bootstrap  所以引入的文件有点多:ps: 如果有需要的小伙伴,可以直接跟我说 下面是div部分: 最后是JS部分: 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家

  • 本文向大家介绍javascript时间差插件分享,包括了javascript时间差插件分享的使用技巧和注意事项,需要的朋友参考一下 javascript时间差插件分享,供大家参考,具体内容如下 Html如下:   TimeDifference.js代码如下:  结果如图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序时间选择插件使用详解,包括了微信小程序时间选择插件使用详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下 wxml js: css: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 4.0.0 我正在尝试使用上面定义的pom设置一个项目。在插件部分中,玻璃鱼已被表示,它正在尝试从该位置下载zip。 http://下载. Java . net/glassfish/4.1/release/glassfish-4.1 . zip 它给了我一个错误[error]Failed to execute goal org.codehaus.icargo:cargo-maven2-plugin

  • 我有带有时间戳(UTC时间)的json日志。我将键和值映射到Cassandra表键并插入记录。但是,Cassandra通过从时间戳中减去5小时,再次将已有的UTC时间戳转换为UTC。这里的时区是(GMT+5)。 现在时间已经是UTC时间,并且仍然插入5小时前的时间戳。 我如何解决这个问题?