CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
user3675188
user3675188

Reputation: 7419

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

I want to keep the selected date in UTC format.

But the pop-up calendar is not sync with the selected datetime.

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

Because in my timezone is 08/13 but the it's still on 08/12 with UTC timezone

inline inline

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

Upvotes: 4

Views: 1177

Answers (2)

harishr
harishr

Reputation: 18065

In the newer versions of ui-datepicker there is an easier way to solve this

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

this remove the timezone component from date

In older versions

The solution is to remove the timezone component of the date part (better have directive for reusability...

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

You can use it like below

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

Upvotes: 0

Fatih Aktepe
Fatih Aktepe

Reputation: 601

If you are storing it as UTC why do you have problem with keeping it as UTC?. If you want to change your time from UTC to another timezone you can use moment for angular. But you must give moment a timezone for converting. For example: 

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

You can pass date parameter as your selected date from the UI and current_tz as your timezone. But you must pass it like " America/Los_Angeles" as title of timezone.

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

The second function enables you to store your selected date as UTC. You should pass the parameters accordingly. For example; if you are in "America/Los_Angeles" you should pass your timezone as the given string and you'll convert it to UTC. So you can sync your UI and backend by using the two functions written above.

Upvotes: 4

Related Questions