弹出日历显示本地日期，但所选日期为 UTC

Question

我想将所选日期保留为 UTC 格式。

但是 pop-up 日历与所选日期时间不同步。

假设我点击 08/13 并且选择的日期是 08/12

因为我的时区是 08/13 但它仍然是 08/12 和 UTC 时区

HTML

  <div class="col-sm-10" ng-click="open($event)">
    <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date ng-valid-required" datepicker-popup="yyyy/MM/dd" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required" aria-required="false" aria-invalid="false" ng-model="form.start_date" />
  </div>

JS 控制器

    app.controller('FlightSkuStartDatepickerCtrl', ['$scope',
        function($scope) {
            // Disable weekend selection
            $scope.disabled = function(date, mode) {
                return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
            };

            $scope.toggleMin = function() {
                $scope.minDate = $scope.minDate ? null : new Date();
            };
            $scope.toggleMin();

            $scope.open = function($event) {
                $event.preventDefault();
                $event.stopPropagation();

                $scope.opened = true;
            };

            $scope.dateOptions = {
                formatYear: 'yy',
                startingDay: 1,
                class: 'datepicker'
            };
            $scope.formats = ['YYYY/MM/DD'];
            $scope.format = $scope.formats[0];
        }
    ]);

Answer 1

如果您将其存储为 UTC，为什么在将其存储为 UTC 时遇到问题？如果您想将时间从 UTC 更改为另一个时区，您可以使用 moment for angular。但是你必须给时刻一个转换时区。例如：

function utctoTimeZoneFormat(date, current_tz) {

            var offset = moment(date).tz(current_tz).utcOffset();
            var returnObj = {
                "day": "",
                "time": ""
            }
            returnObj.day = moment.utc(date).tz(current_tz).utcOffset(offset).format('dddd');
            returnObj.time = moment.utc(date).tz(current_tz).utcOffset(offset).format('HH:mm:ss')

            return returnObj;
        }

您可以传递日期参数作为您从 UI 和 current_tz 中选择的日期作为您的时区。但是你必须像“America/Los_Angeles”一样传递它作为时区的标题。

function timeZoneToUTCFormat(date, current_tz) {

            var offset = moment(date).tz(current_tz).utcOffset();
            offset = offset * -1;
            var returnObj = {
                "day": "",
                "time": ""
            }
            returnObj.day = moment.utc(date).tz(current_tz).utcOffset(offset).format('dddd');
            returnObj.time = moment.utc(date).tz(current_tz).utcOffset(offset).format('HH:mm:ss')

            return returnObj;
        }

第二个功能使您能够将所选日期存储为 UTC。您应该相应地传递参数。例如;如果你在 "America/Los_Angeles" 中，你应该将你的时区作为给定的字符串传递，然后将其转换为 UTC。所以你可以使用上面写的两个函数来同步你的UI和后端。

Answer 2

在较新版本的 ui-datepicker 中，有一种更简单的方法可以解决这个问题

   ng-modal-options='{"timezone":"utc"}'

这从日期中删除了时区组件

旧版本

解决方案是删除日期部分的时区组件（最好有可重用性指令...

myapp.directive("dateToIso", function () {   
    var linkFunction = function (scope, element, attrs, ngModelCtrl) {

        ngModelCtrl.$parsers.push(function (datepickerValue) {
            return moment(datepickerValue).format("YYYY-MM-DD");
        });
    };

    return {
        restrict: "A",
        require: "ngModel",
        link: linkFunction
    };
});

你可以像下面这样使用它

  <input ng-model='abc' date-to-iso ui-datepicker>

弹出日历显示本地日期，但所选日期为 UTC

The popup calendar show local date but the selected date is UTC

javascript

angularjs

angular-ui-bootstrap

HTML

JS 控制器