각도 UI DatePicker 시간대 조정

Question

SQL Server에 날짜로 저장된 날짜가 있습니다. 날짜는 SQL로 쿼리 할 때 2014 년 4 월 24 일을 보여줍니다. 맞아요. 날짜가 UTC로 클라이언트쪽에 올바르게 전달됩니다. 해당 날짜를 편집하려면 Angular UI DatePicker를 사용하고 있습니다. DatePicker는 현지 표준 시간대를 기준으로 날짜를 조정하므로 하루 동안 항상 꺼져 있습니다.

나는 그것이 일어나는 것을 볼 수 있습니다. 우리가 Date 대신에 DateTime을 편집했다면, 시간대를 맞추는 것이 정확할 것입니다. 그러나이 경우에는 날짜가 있으므로 시간대를 신경 쓰지 않고 날짜를 데이터베이스에 그대로 편집하려고합니다.

시간대를 조정하는지 확인할 수 있습니다. 내 Windows 컴퓨터에서 시간대를 UTC로 변경하면 DatePicker에 올바른 날짜가 표시됩니다.

그래서 질문은 DatePicker에 표준 시간대 조정을 해제하고 UTC 형식으로 날짜를 관리하여 SQL Datetime 대신 SQL Date와 함께 사용할 수 있도록하는 방법이 있습니까?

Answer 1

이전과 매우 비슷한 문제가있었습니다. 서버 측 (즉, yyyy-mm-dd 및 시간/시간 정보 없음)에 현지 날짜를 저장하려고했지만 Angular Bootstrap Datepicker가 JavaScript Date 객체를 사용하기 때문에 이것은 가능하지 않았습니다 (JSON의 UTC datetime 문자열로 직렬화됩니다).

내가이 지시문 문제 해결 : 기본적으로 https://gist.github.com/weberste/354a3f0a9ea58e0ea0de

을, 나는 날짜가 날짜 선택기 (이 값, YYYY-MM-DD 형식의 문자열을 선택할 때마다 값을 포맷하고있어,에 저장됩니다 모델) 및보기를 채우기 위해 모델에 액세스 할 때마다 Datepicker가 올바르게 처리 할 수 ​​있도록 Date 객체에 다시 래핑해야합니다.

Answer 2

먼저 부트 스트랩의 지역화 된 날짜 선택 도구가 어리 석고 쓸모가 없다는 것을 지적하고 싶습니다. 아무도 이것과 같은 것을 필요로하지 않습니다. 실제로 원하는 것은 yyyy-MM-dd입니다. 날짜를 현지화 할 필요가 없습니다. 언제 시간이 필요하지 않습니다.

서버 측 시간대에 맞게 클라이언트 측을 구부리지 않으려 고합니다. 즉, 잔인하며 작동하지 않습니다. 은 내가 대신 할 것은에서 사용자의 작업 시간대하자이 같은 서버로 보내기 전에 날짜를 포맷 할 수 있습니다 :

사용자가 날짜 선택에 보는 어떤 I는 서버 측에서받을 수이 보장

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' 예를 들어).

희망이 도움이됩니다. 지시 아래

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

Answer 4

솔루션은 여기 당신에게 유용합니다 https://github.com/angular-ui/bootstrap/issues/4837#issuecomment-203284205

시간대의 문제가 해결된다.

당신은 사용할 수 있습니다

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

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

EDIT :이 솔루션은 버전 2.x부터 작동하지 않지만 그때까지는 문제가 없습니다. 해결 방법을 찾을 수 없으며 버전 1.3.3을 사용하고 있습니다.

EDIT 2 : Sébastien Deprez가 아래 의견에 지적했듯이 은 버전 2.3.1에서 수정되었습니다. 방금 테스트를 거쳤습니다.

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

Answer 5

가장 좋은 방법은 moment.js 라이브러리 수정에게 브라우저 시간대 및 구성 요소 시간대 그것은 좀 작동