표준 시간대에 맞게 조정되는 각도 UI DatePicker

표준 시간대에 맞게 조정되는 각도 UI DatePicker

SQL Server에 날짜로 저장된 날짜가 있습니다.SQL에서 조회한 날짜는 2014년 4월 24일로 되어 있습니다.그것이 맞아요.날짜는 UTC로 클라이언트 측에 올바르게 전달됩니다.해당 날짜를 편집하려면 Angular UI DatePicker를 사용합니다.DatePicker는 현지 시간대를 기준으로 날짜를 조정하고 있기 때문에 항상 1일 정도 꺼집니다.

나는 그것이 일어나고 있다는 것을 알 수 있다.Date가 아닌 Date Time을 편집하는 경우 시간대를 조정하는 것이 올바릅니다.다만, 이 경우는, 날짜 밖에 없기 때문에, 타임 존에 관계없이, 데이타베이스에 있던 대로 날짜를 편집하고 싶다고 생각하고 있습니다.

시간대에 맞춰 조정되고 있는 것을 확인할 수 있습니다.윈도 머신의 타임존을 UTC로 변경하면 DatePicker에 올바른 날짜가 표시됩니다.

따라서 DatePicker에 시간대 조정을 해제하고 UTC 형식으로 날짜를 관리하도록 지시하여 SQL Datetime 대신 SQL Date와 함께 작동하도록 할 수 있는 방법이 있을까요?

얼마 전에도 비슷한 문제가 있었습니다.로컬 날짜를 서버 측에 저장하려고 했습니다(yyy-mm-dd, timezome/time 정보 없음). 그러나 Angular Bootstrap Datepicker는 JavaScript Date 객체를 사용하기 때문에 불가능합니다(자신이 알고 있듯이 JSON의 UTC datetime 문자열로 시리얼화됩니다).

이 지시로 문제를 해결했습니다.https://gist.github.com/weberste/354a3f0a9ea58e0ea0de

기본적으로 날짜 선택 시(이 값, yyy-mm-d 형식의 문자열이 모델에 저장됨) 값을 다시 포맷하고 모델에 액세스하여 보기를 채울 때마다 날짜 개체로 다시 래핑해야 날짜 선택자가 적절하게 처리할 수 있습니다.

솔루션은 https://github.com/angular-ui/bootstrap/issues/4837#issuecomment-203284205 에서 확인하실 수 있습니다.

타임존 문제는 해결.

다음을 사용할 수 있습니다.

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

시간대 계산 없이 날짜 선택기를 얻으려면

편집: 이 솔루션은 버전 2.x 이후로는 동작하지 않지만, 그때까지는 정상적으로 동작했습니다.회피책을 찾지 못하고 버전 1.3.3을 사용하고 있습니다.

편집 2: Sébastien Deprez가 아래의 코멘트에서 지적한 바와 같이, 이것은 버전 2.3.1에서 수정되었습니다.방금 테스트해 봤는데 잘 작동해요.

<input
 uib-datepicker-popup
 ng-model="$ctrl.myModel"
 ng-model-options="{timezone: 'utc'}">

먼저, 부트스트랩의 현지화된 달력 보기는 어리석고 쓸모없다는 것을 지적하고 싶습니다.이런 것은 아무도 필요 없습니다.당신이 정말로 원하는 것은 날짜 yyy-MM-d 뿐입니다.시간이 필요없는 날짜를 현지화하는 것은 의미가 없습니다.

서버의 타임존에 맞추어 클라이언트측을 구부리려고 하지 않습니다.그것은 과잉이며, 동작하지 않습니다.대신 사용자가 타임존에서 작업할 수 있도록 하고 날짜를 포맷한 후 다음과 같이 서버로 전송합니다.

fields.date = dateFilter(trans.date, 'MM/dd/yy');

이렇게 하면 사용자가 서버 측에서 수신한 달력 보기에서 볼 수 있는 모든 것이 보장됩니다.내게 묻는다면 매우 중요하다.최소 날짜와 최대 날짜를 다시 설정해야 할 경우 다음과 같이 사용자의 표준 시간대로 설정합니다.

$scope.datepickerOptions.minDate = new Date(dateFilter(minDate, 'yyyy-MM-dd\'T\'00:00:00', serverTimezone));
$scope.datepickerOptions.maxDate = new Date(dateFilter(maxDate, 'yyyy-MM-dd\'T\'00:00:00', serverTimezone));

minDate 및 maxDate는 서버로 현지화된 날짜이며 serverTimezone은 서버의 시간대 오프셋(예를 들어 +0500)입니다.

이게 도움이 됐으면 좋겠네요!

시간대를 null로 설정한 것이 나에게는 매력처럼 작용했다.선택한 날짜를 그대로 유지합니다.

ng-model-options="{timezone: null}"

주의: 모든 타임존에서 테스트 완료.사용하고 있는uib 버전은 1.3.3 입니다.

아래 지시사항이 도움이 되기를 바랍니다.

app.directive('datetimepickerNeutralTimezone', function () {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (value) {
                if (typeof value === "undefined") {
                    var date = new Date();
                    //date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
                    return date;
                } else {
                    var date = new Date(Date.parse(value));
                    //date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
                    return date;
                }
            });

            ctrl.$parsers.push(function (value) {
                var date = new Date(value.getTime() - (60000 * value.getTimezoneOffset()));
                return date;
            });
        }
    };
});

app.directive('timepickerNeutralTimezone', function () {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.push(function (value) {
                if (typeof value === "undefined") {
                } else {
                    var date = new Date(Date.parse(value));
                    date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
                    return date;
                }
            });

            ctrl.$parsers.push(function (value) {
                var date = new Date(value.getTime() - (60000 * value.getTimezoneOffset()));
                return date;
            });
        }
    };
});

저는 라이브러리의 매우 오래된 버전을 사용하고 있기 때문에 날짜 선택기에서 반환된 오브젝트 expiration_date를 지정하면 회피책을 찾아 다음과 같이 수정해야 했습니다.

expiration_date.setMinutes(-expiration_date.getTimezoneOffset());

그러면 요청된 날짜가 해당 UTC 날짜로 설정되지만 로컬 시간대 형식으로 표시됩니다.

나한텐 잘 먹혔어요.도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/22623872/angular-ui-datepicker-adjusting-for-timezone