Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Strap Datepicker: Inconsistent timestamps returned, UTC +0 vs UTC +12 hours

Situation:

  • We are using Angular-Strap's datepicker and want to return UTC timestamps to the server.
  • When selecting a date (no time selection) we found out that some computers return a timestamp with a time of 0:00, and some with a time of 12:00.
  • This was browser independent, but differed between computers.

Problem:

  • Some computers return 0:00, some 12:00.

What I tried:

  • While debugging I found out that the problem arose at line 379 of angular-strap/dist/modules/datepicker.js#L379, the controller.$dateValue returns 'Sat Mar 28 1987 12:00:00 GMT+0100 (W. Europe Standard Time)' instead of 'Sat Mar 28 1987 00:00:00 GMT+0100 (W. Europe Standard Time)', the value that is returned by other computers.

Question:

  • How to return a 0:00 time in all situations?
like image 735
MeProtozoan Avatar asked Jan 29 '26 03:01

MeProtozoan


1 Answers

I also faced a same kind of problem. What I did is wrote a directive to convert the date utc Date. check the code sample. This solve my problem.

(function (angular) {
angular.module('myApp').directive('datePicker', ['$parse', 'dateFilter', function           ($parse, dateFilter) {
    var inputDateFormat = 'dd/MM/yyyy';

    var utcDateGeneretor = function (dateString) {
        if ('undefined' === typeof dateString || '' === dateString) {
            return null;
        }

        var parts = dateString.split('/');
        if (3 !== parts.length) {
            return null;
        }
        var year = parseInt(parts[2], 10);
        var month = parseInt(parts[1], 10);
        var day = parseInt(parts[0], 10);
        if (year.toString().length < 4) {
            return null;
        }

        if (month < 0 || year < 0 || day < 1) {
            return null;
        }

        //Javascript month is zero based. thats why always reduce 1 form selected month.
        return new Date(Date.UTC(year, (month - 1), day));
    };

    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrls) {

            var mindatecalvalue = parseInt(attrs["mindatecalvalue"], 10);
            var maxdatecalvalue = parseInt(attrs["maxdatecalvalue"], 10);
            var twoDigitCutoffSpecified = attrs["twoDigitCutoff"];
            var twoDigitYear1900cutoff = -1;  //If a 2-digityear is less than this number it is treated as being 2000+, otherwise 1900+.
            if (twoDigitCutoffSpecified) {
                twoDigitYear1900cutoff = parseInt(attrs["twoDigitCutoff"], 10);
                if (isNaN(twoDigitYear1900cutoff)) {
                    twoDigitYear1900cutoff = -1;
                } else if (twoDigitYear1900cutoff <= 0) {
                    twoDigitYear1900cutoff += (new Date().getFullYear() - 2000); //A negative number is interpreted as a number of years before the current year.
                }
            }

            var updateModel = function (dateText) {

                var canonicalisedDateText = ensureFullYear(dateText, twoDigitYear1900cutoff);

                // call $apply to bring stuff to angular model
                scope.$apply(function () {
                    ctrls.$setViewValue(canonicalisedDateText);
                });
                ctrls.$render();
            };

            var ensureFullYear = function (dateText, twoDigitYear1900cutoff) {
                var findYearRegex = /(.+[^0-9])([0-9]+)\s*$/;
                var dateParts = findYearRegex.exec(dateText);
                if ((!dateParts) || (dateParts.length != 3)) {
                    return dateText; //can't find a year in this date.
                }
                var originalYearAsStr = dateParts[2];
                if (originalYearAsStr.length > 2) {
                    return dateText; //Not a 2-digit year.
                }
                var originalYear = parseInt(originalYearAsStr, 10);
                var fullYear = 0;
                if (originalYear <= twoDigitYear1900cutoff) {
                    fullYear = 2000 + originalYear;
                } else {
                    fullYear = 1900 + originalYear;
                }
                var restOfDate = dateParts[1];
                return restOfDate + fullYear;
            }


            ctrls.$formatters.push(function (modelValue) {
                return dateFilter(modelValue, inputDateFormat);
            });

            ctrls.$parsers.push(function (dateString) {
                return utcDateGeneretor(dateString);
            });
        }
    };
}]);

})(angular);
like image 62
Seminda Avatar answered Jan 31 '26 18:01

Seminda



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!