如何在jQuery日期和时间选择器中使用javascript / jQuery调整时区?

疯狂先生8

询问:

如何使用jQuery,Javascript或两者中的任何一个插件将用户在其本地时区中指定的日期和时间调整为UTC或其他给定的时区?

背景:

我在html表单文本字段上使用bootstrap-datetimepicker插件。用户可以指定将来的日期和时间(以安排事件,即电话呼叫)。他们将在自己的时区中指定日期和时间,而不会被要求指定时区(这意味着他们将看到的只是一个日历和时钟,他们将在其中选择所需的日期和时间)。我需要能够将此时间(和日期(如果适用))调整为UTC或其他时区(具体是EST / EDT,具体取决于是否采用DST)。用户必须不知道正在进行此调整。因此,必须以某种方式检测其时区。当我使用bootstrap-datetimepicker时,moment.js插件可用。我可能会包括我认为合适的任何javascript / jQuery插件或库(页面加载时间不是我必须考虑的因素)。我当然可以在页面上添加一个隐藏字段,以便提交调整后的时间。

要求/限制:

  • 我必须使用bootstrap-datetimepicker作为输入。
  • 我不能向用户询问他们的本地时区。
  • 我不能问用户他们的位置。
  • 我无法向用户显示调整后的时区。
  • 我无法编辑接收表单数据并将其存储在mySQL数据库中的PHP。
  • 我必须使用javascript或jQuery完成此操作(除非有一些我不知道的HTML / CSS魔术,这应该是给定的)。

代码:

我不确定是否有帮助,但这是我的代码:

 $(function() {
   if (parseInt($(window).width()) < 768) {
     $('#datetimepicker1').datetimepicker({
       inline: true,
       useCurrent: false,
       daysOfWeekDisabled: [0, 6],
       defaultDate: false,
       showClear: true,
       showTodayButton: true
     });
   } else {
     $('#datetimepicker1').datetimepicker({
       inline: true,
       sideBySide: true,
       useCurrent: false,
       daysOfWeekDisabled: [0, 6],
       defaultDate: false
     });
   }
 });
<!-- BEGIN NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/locales.min.js"></script>

<!-- END NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES -->

<!-- BEGIN LIKELY IRRELEVANT CODE -->
<form action="some.php" method="post" enctype="multipart/form-data" class="grid-form">
  <label>Optimal Date and Time (optional)</label>
  <input class="hidden" type="text" name="time" id="datetimepicker1">
  <div class="datetimeplaceholder"></div>
  <br>
  <br>
  <button type="submit" class="btn btn-primary">Send Message</button>
</form>
<!-- END LIKELY IRRELEVANT CODE -->

如果SO的代码段很笨拙,也可以在Codepen上找到它:codepen.io/anon/pen/gpBgBz

笔记:

我为您的冗长而道歉。我已经看过并看到了类似的条目。这几乎可以肯定是重复的;但是,我并没有真正理解所提供的答案。总的来说,我对jQuery或JS不太满意。尽管如此,我确实意识到这是解决此问题的一种糟糕方法。任意要求使这一过程变得非常复杂。

疯狂先生8

选择器将输出moment.js时刻。我想出了从那一刻起如何找到UTC时间和日期的方法。

$("form").submit(function() {
    var datetime1 = $('#datetimepicker1').data("DateTimePicker").date();
    var correctdatetime = datetime1.utc();
    $('#datetimepicker1').val(correctdatetime);
}

这完成了我想要的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用滑块实现Jquery日期时间选择器

来自分类Dev

如何在 aurelia 中使用 JQuery UI 日期选择器更改语言环境?

来自分类Dev

如何在JQuery中使用动态选择器

来自分类Dev

如何在on方法jQuery中使用多个选择器?

来自分类Dev

如何在表选择器中使用 jQuery 变量

来自分类Dev

如何在 jQuery 中使用 .not 选择器?

来自分类Dev

如何使用jQuery日期时间选择器设置结束日期大于开始日期

来自分类Dev

如何使用jQuery日期时间选择器设置结束日期大于开始日期

来自分类Dev

如何在jQuery UI日期选择器中动态设置最小和最大日期

来自分类Dev

jQuery Ui日期时间选择器

来自分类Dev

jQuery日期时间选择器问题

来自分类Dev

jQuery UI日期时间选择器

来自分类Dev

jQuery的日期时间选择器功能

来自分类Dev

滚动日期时间选择器 jQuery

来自分类Dev

实现 Jquery 日期时间选择器

来自分类Dev

在jQuery中使用日期选择器,今天显示

来自分类Dev

JQuery:如何在jquery选择器中使用for循环变量?

来自分类Dev

JQuery:如何在jquery选择器中使用for循环变量?

来自分类Dev

在Jquery Ajax中使用选择器和$(this)

来自分类Dev

时间选择器验证?jQuery / JavaScript

来自分类Dev

在JavaScript函数中使用选择器“ $(this).find()” jQuery

来自分类Dev

在jQuery选择器中使用javascript参数

来自分类Dev

如何使用 javascript 或 jquery 比较两个时间选择器

来自分类Dev

如何在多个类作为一个类的jQuery中使用not选择器

来自分类Dev

如何在jquery中使用选择器属性进行除法?

来自分类Dev

如何在jQuery中使用多个“属性等于”选择器?

来自分类Dev

使用datetimepicker从jquery的时间选择器

来自分类Dev

聚合查询调整时区的日期

来自分类Dev

使用Bootstrap日期时间选择器(Asp.Net MVC4应用程序中的Jquery验证插件)验证日期和日期时间

Related 相关文章

  1. 1

    如何使用滑块实现Jquery日期时间选择器

  2. 2

    如何在 aurelia 中使用 JQuery UI 日期选择器更改语言环境?

  3. 3

    如何在JQuery中使用动态选择器

  4. 4

    如何在on方法jQuery中使用多个选择器?

  5. 5

    如何在表选择器中使用 jQuery 变量

  6. 6

    如何在 jQuery 中使用 .not 选择器?

  7. 7

    如何使用jQuery日期时间选择器设置结束日期大于开始日期

  8. 8

    如何使用jQuery日期时间选择器设置结束日期大于开始日期

  9. 9

    如何在jQuery UI日期选择器中动态设置最小和最大日期

  10. 10

    jQuery Ui日期时间选择器

  11. 11

    jQuery日期时间选择器问题

  12. 12

    jQuery UI日期时间选择器

  13. 13

    jQuery的日期时间选择器功能

  14. 14

    滚动日期时间选择器 jQuery

  15. 15

    实现 Jquery 日期时间选择器

  16. 16

    在jQuery中使用日期选择器,今天显示

  17. 17

    JQuery:如何在jquery选择器中使用for循环变量?

  18. 18

    JQuery:如何在jquery选择器中使用for循环变量?

  19. 19

    在Jquery Ajax中使用选择器和$(this)

  20. 20

    时间选择器验证?jQuery / JavaScript

  21. 21

    在JavaScript函数中使用选择器“ $(this).find()” jQuery

  22. 22

    在jQuery选择器中使用javascript参数

  23. 23

    如何使用 javascript 或 jquery 比较两个时间选择器

  24. 24

    如何在多个类作为一个类的jQuery中使用not选择器

  25. 25

    如何在jquery中使用选择器属性进行除法?

  26. 26

    如何在jQuery中使用多个“属性等于”选择器?

  27. 27

    使用datetimepicker从jquery的时间选择器

  28. 28

    聚合查询调整时区的日期

  29. 29

    使用Bootstrap日期时间选择器(Asp.Net MVC4应用程序中的Jquery验证插件)验证日期和日期时间

热门标签

归档