The pop-up calendar displays the local date, but the selected date is UTC

Question

I want to save the selected date in UTC format.

But the pop-up calendar does not synchronize with the selected datetime.

Let's say when I click 08/13 and the selected date is 08/12

Because in my time zone is 08/13, but it is still on 08/12 with UTC time zone

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 controller

    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

If you store it as UTC, why do you have a problem saving it as UTC ?. If you want to change your time from UTC to a different time zone, you can use the moment for angular. But you must specify a point in time for the conversion. For instance:

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;
        }

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. , , , .

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>