日期框中的时区问题答案

【问题标题】：Time zone issue in datebox日期框中的时区问题
【发布时间】：2014-07-13 20:33:42
【问题描述】：

我的代码有一个奇怪的问题...它在我的 PC 上运行良好，但在我的 iPhone 上的时间是 +2 小时...有人可以在这里查看我的代码示例...

我已经尝试了几个小时来让它工作，但我尝试的一切似乎都以同样的方式结束......

<html lang="en">
<head>
    <title>Value is right on my PC, but not on my iPhone...?</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>  

        <script type="text/javascript">
        window.onload = function () { date() }, setInterval(function () { date() }, 1000);
        window.onload = function () { calculateTimlon() }, setInterval(function () { calculateTimlon() }, 1000);

        var secondsDifference;
        var minutesDifference;
        var hoursDifference;
        var totalTimeDifference;
        var startTime;
        var timeRightNow;


        function date() {
            timeRightNow = new Date();

            $('#MyDateInput').datebox({ 'overrideDateFormat': '%A %d-%B-%Y' });
            $('#MyTimeInput').datebox({ 'overrideDateFormat': '%H:%M:%S' });

            startTime = new Date($('#MyDateInput').datebox('callFormat', '%Y-%m-%d', $('#MyDateInput').datebox('getTheDate')) + "T" + $('#MyTimeInput').datebox('callFormat', '%H:%M:%S', $('#MyTimeInput').datebox('getTheDate')));
            totalTimeDifference = Math.abs(new Date(timeRightNow) - new Date(startTime));
            secondsDifference = Math.floor(totalTimeDifference / 1000);
            minutesDifference = Math.floor(secondsDifference / 60);
            secondsDifference = secondsDifference % 60;
            hoursDifference = Math.floor(minutesDifference / 60);
            minutesDifference = minutesDifference % 60;

            $("#hoursValue").html(hoursDifference);
            $("#minutesValue").html(minutesDifference);
            $("#secondsValue").html(secondsDifference);

            $("#MyTimeValue").html(startTime);
            $("#timeRightNowValue").html(timeRightNow);
        }

        function calculateTimlon() {
            var timlon = 100;
            var skatt = 0;
            var semersat = 0;

            var lonForeSkatt = ((semersat / 100) + 1) * timlon;
            var timskatt = (lonForeSkatt * (skatt / 100));
            var lonEfterSkatt = lonForeSkatt - timskatt;

            var minutlonEfterSkatt = lonEfterSkatt / 60;
            var sekundlonEfterSkatt = minutlonEfterSkatt / 60;

            var minutlonForeSkatt = lonForeSkatt / 60;
            var sekundlonForeSkatt = minutlonForeSkatt / 60;

            var sekundCounterEfterSkatt = (sekundlonEfterSkatt * totalTimeDifference) / 1000;
            var krEarnedFromStartEfterSkatt = sekundCounterEfterSkatt.toFixed(2);

            var sekundCounterForeSkatt = (sekundlonForeSkatt * totalTimeDifference) / 1000;
            var krEarnedFromStartForeSkatt = sekundCounterForeSkatt.toFixed(2);


            if (krEarnedFromStartEfterSkatt >= 0) {
                $("#earnedFromStartValue").html(krEarnedFromStartEfterSkatt + "kr");                
            }
        }
    </script>
</head>
<body>    
    <div data-role="page" id="MyPage">

        <div data-role="content" id="MyPageContent" name="MyPageContent" data-position="fixed">
            <div class="ui-field-contain">
                <div id="MyStartTime">
                    <input name="MyDateInput" id="MyDateInput" type="date" data-role="datebox" data-options='{"mode": "datebox", "overrideHeaderFormat":"%A %d-%B-%Y","useNewStyle":true, "useFocus":true,"overrideTimeFormat": 24, "closeCallback": "$(\"#MyTimeInput\").datebox(\"open\");"}' />
                    <input name="MyTimeInput" id="MyTimeInput" type="time" data-role="datebox" data-options='{"mode": "timebox", "useNewStyle":true, "useFocus":true,"overrideTimeFormat": 24}' />
                </div>
            </div>

            <div id="timeRightNowText">My choosen startTime: <div id="MyTimeValue"></div></div>

                <div id="hoursText">Hours: <div id="hoursValue"></div></div>
                <div id="minutesText">Minutes: <div id="minutesValue"></div></div>
                <div id="secondsText">Seconds: <div id="secondsValue"></div></div>
                <div id="timeRightNowText">Time right now: <div id="timeRightNowValue"></div></div>

                <div class="ui-block-b" id="valueFromStartTime">This value should start ticking from 0 if the time right now is the same as the time i choose above..<div id="earnedFromStartValue"></div></div>
            </div>
    </div>
</body>
</html>

【问题讨论】：

HTML Input type datetime-local setting the wrong time-zone 的可能重复项
请注意，这个问题与我作为重复链接的问题之间的唯一区别是您是从 datebox 控件而不是 datetime-local 构建字符串。问题的其余部分是相同的，同样的答案也适用。
你让它工作了吗？一个我应该怎么做的例子会很棒。
阅读我链接的问题中的答案。在您的代码中，通过将字符串传递给 Date 构造函数，查看您构建 startTime 值的位置。
其实通读the documentation for this particular control，应该可以直接检索到Date对象。使用getTheDate 函数。如果您需要组合来自两个不同框（日期框和时间框）的值，则只需添加它们的值。不要将它们与字符串组合。

标签： jquery-mobile timezone datebox

【解决方案1】：

我确实像下面的示例一样更改了 timeRightNow，现在它可以工作了！似乎 iPhone 需要 startTime 和 timeRightNow 才能以完全相同的方式进行正确的计算。我还在 startTime 的末尾添加了 +“+02:00”，以进行正确的时区计算。

var datetimeRightNow = new Date();

timeRightNow = new Date(datetimeRightNow.getFullYear() + '-' + (('' + (datetimeRightNow.getMonth() + 1)).length < 2 ? '0' : '') + (datetimeRightNow.getMonth() + 1) + '-' + (('' + datetimeRightNow.getDate()).length < 2 ? '0' : '') + datetimeRightNow.getDate() + "T" + (('' + datetimeRightNow.getHours()).length < 2 ? '0' : '') + datetimeRightNow.getHours() + ":" + (('' + datetimeRightNow.getMinutes()).length < 2 ? '0' : '') + datetimeRightNow.getMinutes() + ":" + (('' + datetimeRightNow.getSeconds()).length < 2 ? '0' : '') + datetimeRightNow.getSeconds() + "+02:00");

【讨论】：