如何使用 jQuery 时间选择器在之前“更改”的开始时间上添加 2 小时的结束时间?

2024-02-06

我使用的 jQuery 时间选择器:http://timepicker.co/ http://timepicker.co/

我想要实现的目标:

  • 两个时间输入框:开始时间和结束时间。
  • 开始时间:上午 8:00。
  • 结束时间:当开始时间更改并设置为上午 8:00 时,结束时间应自动设置为上午 10:00。
$('#t1').timepicker({
    timeFormat : 'hh:mm a',
    interval : 30,
    minTime : '8',
    maxTime : '11:00 PM',
    startTime : '08:00 AM',
    dynamic : false,
    dropdown : true,
    scrollbar : true
});
$('#t1')
.timepicker('option', 'change', function(time) {
    $('#t2').timepicker('option', 'minTime', time);
    $('#t2').timepicker('setTime', time);
});
$('#t2').timepicker({
    timeFormat : 'hh:mm a',
    interval : 30,
    maxTime : '11:00 PM',
    startTime : '08:00 AM',
    dynamic : false,
    dropdown : true,
    scrollbar : true
});

现在一切都很顺利,除了增加 2 小时的方式还不稳定。


Use the Date目的 (time)传递给#t1更改处理程序;在该时间上加上 2 小时(以毫秒为单位,所以2 * 60 * 60 * 1000),并创建一个新的Date()目的。放#t2基于that.

$('#t1')
  .timepicker('option', 'change', function(time) {
    var later = new Date(time.getTime() + (2 * 60 * 60 * 1000));

    $('#t2').timepicker('option', 'minTime', time);
    $('#t2').timepicker('setTime', later);
  });
$('#t1').timepicker({
  timeFormat: 'hh:mm a',
  interval: 30,
  minTime: '8',
  maxTime: '11:00 PM',
  startTime: '08:00 AM',
  dynamic: false,
  dropdown: true,
  scrollbar: true
});

$('#t1')
  .timepicker('option', 'change', function(time) {
    var later = new Date(time.getTime() + (2 * 60 * 60 * 1000));
    $('#t2').timepicker('option', 'minTime', time);
    $('#t2').timepicker('setTime', later);
  });

$('#t2').timepicker({
  timeFormat: 'hh:mm a',
  interval: 30,
  maxTime: '11:00 PM',
  startTime: '08:00 AM',
  dynamic: false,
  dropdown: true,
  scrollbar: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet" />

<input type="text" id="t1" />
<input type="text" id="t2" />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 jQuery 时间选择器在之前“更改”的开始时间上添加 2 小时的结束时间? 的相关文章

随机推荐

  • Autofac - 将属性注入 asp.net mvc 控制器

    我有一个基本控制器 它继承了我的所有控制器 这个基本控制器有一些属性 我想使用属性注入来注入 我的控制器注册看起来像这样 builder RegisterControllers Assembly GetExecutingAssembly 我
  • 在 ListView 布局模板中显示总计

    我使用 ListView 控件 ASP NET 2008 来显示一堆数据行 在底部我想要一些总计 我最初打算在 LayoutTemplate 中定义页眉和页脚 并使用一些本地函数 即 获取总计 但 LayoutTemplate 似乎不处理
  • 如何使用 java Firebase Admin SDK 将分析标签添加到数据消息?

    自 7 月 1 日起 Firebase 要求向消息添加标签 以便分析显示数据消息发送的数量等 从 2019 年 7 月 1 日星期一开始 您将能够通过分析标签过滤数据 在该日期之后 没有分析标签发送的数据消息可能不会在此仪表板中显示 问题是
  • 连续检查队列

    我想要一个函数来在一个线程上连续检查队列是否有新添加 显然 可以选择连续循环睡眠 但我想要一些不那么浪费的东西 我考虑了某种类型的等待句柄 然后让队列向它发出信号 但我无法安全地覆盖 Enqueue 因为它不是虚拟的 现在我正在考虑封装一个
  • 奇怪的重复出现的模板和模板参数相关的子类化问题

    我正在尝试使以下代码工作 template lt class derived class object typename derived Object gt struct Base using Derived derived using O
  • Scala:通过依赖注入协调类型类

    最近 Scala 博主们似乎对类型类模式 其中一个简单的类具有由符合某些特征或模式的附加类添加的功能 作为一个过于简单化的例子 简单的类 case class Wotsit value Int 可以适应 Foo 特征 trait Foo T
  • Next.js 应用程序错误:发生客户端异常(有关更多信息,请参阅浏览器控制台)

    尝试加载呈现从外部 API 提取的产品信息的页面时看到上述错误 错误仅发生在生产环境中 本地一切运行正常 检查控制台时出现此错误 TypeError undefined is not a function near n map Next B
  • Rails 3 Web 字体 (woff) mime 类型

    我们从静态资产中提供一些网络字体 woff 我想设置正确的 mime 类型 application x font woff 我尝试这样做config initializers mime types rb但它没有效果 Mime Type re
  • 是否可以使用 itextSharp 将 PDF 页面转换为图像?

    您好 我一直在 dot net 中的所有 pdf 相关项目中使用 itextSharp 我遇到了一个需要将 PDF 页面转换为图像的需求 我找不到任何此类事情的样本 我发现另一个工具 Ghostscript 能够做到这一点 问题是我在共享主
  • 如何让WebStorm IDE正确识别文件类型?

    的背景 在 JetsBrains WebStorm IDE 中 最初我创建了一个名为HelloWorldContainer 不小心遗漏了 js扩展 我的意思是创建HelloWorldContainer js WebStorm 询问我希望该文
  • 闪亮的数据表:禁用某些行的行选择

    我正在尝试确定是否有可能shiny DataTable对某些行禁用行选择 使用selection的参数DT datatable我可以预先选择行 确定用户是否选择行或列或两者 并完全禁用选择 但我不清楚是否可以指示要排除的特定行 这可能吗 R
  • Google 地图 API 3refererNotAllowedMapError

    我对 Google Maps APi 并不陌生 并且已经使用它很多年了 但我很困惑 我已经安装了 Google Maps Javascript API 的最新代码示例的精确副本 简单地图 然后 我从 Google Developers Co
  • 使用 Spring Data MongoDB 在 MongoDB 中对存储为 BigDecimal 类型的数值进行排序

    我正在通过教程学习 Spring Data MongoDB https spring io guides tutorials data 2 https spring io guides tutorials data 2 在本教程中 成本类型
  • 如何根据新的安全策略在.Net中发送电子邮件?

    为了更好地保护您的用户 GMail 和其他邮件提供商建议将我们的所有应用程序升级到 OAuth 2 0 我说得对吗 这意味着System Net Mail不再工作了 我们需要使用另一个库 比如MailKit 一般来说 我试图了解如何在不允许
  • Webkit 动画在 iPad 上的表现

    基于 webkit 的转换 动画会影响 iPad 上的 JS 性能吗 是否有一个单独的图形处理器来处理 webkit 的东西 基本上我正在开发一个带有一些简单的 webkit 动画的程序 但是其中有很多动画 我想我必须删除这些动画 因为它使
  • TLS v1.2 上的 Android 客户端/服务器

    我正在尝试在服务器和 Android 客户端之间创建 TLS v1 2 通信 我建立了 TLS v1 0 连接 但遇到任何问题 但无法获取 v1 2 这是服务器代码 char passphrase myComplexPass1 toChar
  • Amazon s3 .NET SDK,您尝试访问的存储桶必须使用指定的终端节点进行寻址

    我在 Widows Phone 8 应用程序中使用 amazon NET SDK 来上传图像 代码工作正常 现在出现异常 您尝试访问的存储桶必须使用 指定的端点 请将所有未来请求发送到此端点 我已经更新到最新版本的 SDK 2 0 2 2
  • Mopub 广告未展示

    我已经被一个问题困扰了一段时间 但我无法弄清楚它是什么 问题是我最近更新了Mopub Android SDK以及插页式 横幅广告 AdMob and 千禧年媒体 在此之前工作正常 现在 这些广告在发布版本中不起作用 但在调试版本中确实有效
  • 使 JFileChooser 选择文件名文本而不是扩展名

    我希望 JFileChooser 保存对话框的文件名字段中的文本仅选择文件名而不是扩展名 我目前有这个 并希望它看起来像这样 这是一个简单的更改 但在我看来 它使保存文件变得更加容易 因为用户可以立即开始输入文件名 而不会意外删除扩展名 我
  • 如何使用 jQuery 时间选择器在之前“更改”的开始时间上添加 2 小时的结束时间?

    我使用的 jQuery 时间选择器 http timepicker co http timepicker co 我想要实现的目标 两个时间输入框 开始时间和结束时间 开始时间 上午 8 00 结束时间 当开始时间更改并设置为上午 8 00