it-swarm-korea.com

사용자의 로캘 형식 및 시간 오프셋으로 날짜 / 시간 표시

서버가 항상 HTML로 UTC로 날짜를 제공하고 클라이언트 사이트의 JavaScript가 사용자의 현지 시간대로 변환하도록하고 싶습니다.

사용자의 로캘 날짜 형식으로 출력 할 수있는 경우 보너스.

153
kch

UTC 날짜로 시작하는 가장 확실한 방법은 새 Date 객체를 만들고 setUTC… 메서드를 사용하여 원하는 날짜/시간으로 설정하는 것입니다.

그런 다음 다양한 toLocale…String 메소드가 현지화 된 출력을 제공합니다.

예:

// This would come from the server.
// Also, this whole block could probably be made into an mktime function.
// All very bare here for quick grasping.
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);

console.log(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
console.log(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004
console.log(d.toLocaleDateString());   // -> 02/28/2004
console.log(d.toLocaleTimeString());   // -> 23:45:26

일부 참고 문헌 :

154
kch

새 프로젝트의 경우 moment.js

이 질문은 꽤 오래되었으므로 그 당시에는 moment.js 는 존재하지 않았지만 새 프로젝트의 경우 이와 같은 작업을 단순화합니다.

다음과 같이 UTC에서 parse 날짜 문자열을 사용하는 것이 가장 좋습니다 (모든 브라우저에서 일관된 결과를 얻으려면 서버에서 ISO-8601 호환 문자열을 작성하십시오).

var m = moment("2013-02-08T09:30:26Z");

이제 애플리케이션에서 m을 사용하면 moment.js는 기본적으로 표시 작업을위한 현지 시간대로 설정됩니다. 날짜 및 시간 값의 형식을 지정하는 여러 가지 방법 이 있거나 그 일부를 추출합니다.

다음과 같이 사용자 로케일에서 moment 객체를 포맷 할 수도 있습니다.

m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us

Moment.js 객체를 다른 시간대로 변환하려면 (즉, 로컬 시간대도 UTC도 아님) moment.js 시간대 확장명 이 필요합니다. 이 페이지에는 몇 가지 예가 있으며 사용하기가 매우 간단합니다.

65
theDmi

시간대로 new Date().getTimezoneOffset()/60을 (를) 사용할 수 있습니다. 사용자의 로캘을 사용하여 날짜를 표시하는 toLocaleString() 방법도 있습니다.

전체 목록은 다음과 같습니다. 날짜 작업

20
jop

날짜 개체가 생성되면 다음은 전환을위한 스 니펫입니다.

이 함수는 UTC 형식의 Date 객체와 형식 문자열을 사용합니다.
Date.strftime 프로토 타입이 필요합니다.

function UTCToLocalTimeString(d, format) {
    if (timeOffsetInHours == null) {
        timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
    }
    d.setHours(d.getHours() + timeOffsetInHours);

    return d.strftime(format);
}
7
simianarmy

JS에서는 위에서 언급 한 것처럼 각 속성을 변환하지 않고 로컬 날짜 시간을 형식화하는 간단하고 크로스 플랫폼 방법이 없습니다.

다음은 로컬 YYYY-MM-DD를 얻는 데 사용하는 빠른 해킹입니다. 최종 날짜에 더 이상 올바른 시간대가 없으므로 시간대를 무시해야하기 때문에 이것은 해킹입니다. 더 필요한 것이 있으면 moment.js를 사용합니다.

var d = new Date();    
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0,0); 
// 2017-05-09T08:24:26.581Z (but this is not UTC)

D.getTimezoneOffset ()은 표준 시간대 오프셋을 분 단위로 반환하고 d.getTime ()은 ms 단위이므로 x 60,000입니다.

6
Jeremy Chone

지난 프로젝트에서 사용한 내용은 다음과 같습니다.

var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set.  again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');
5
Mark

.getTimezoneOffset() 방법은 표준 시간대 오프셋을 분 단위로보고하며 GMT/UTC 표준 시간대에서 "서쪽"을 계산하여 일반적으로 익숙한 것보다 음의 오프셋 값을 생성합니다. (예 : 뉴욕 시간은 +240 분 또는 +4 시간으로보고됩니다)

시간 단위로 표준 시간대 오프셋을 얻으려면 다음을 사용해야합니다.

var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60

중요한 세부 사항 :
일광 절약 시간이 결과에 반영됩니다. 따라서이 방법은 실제로 time 오프셋입니다. 실제 지리적 위치는 아닙니다. time-zone 오프셋 .

3
Már Örlygsson

PHP 코드의 날짜와 함께 다음과 같이 사용했습니다 ..

function getLocalDate(php_date) {
  var dt = new Date(php_date);
  var minutes = dt.getTimezoneOffset();
  dt = new Date(dt.getTime() + minutes*60000);
  return dt;
}

우리는 이것을 이렇게 부를 수 있습니다

var localdateObj = getLocalDate('2015-09-25T02:57:46');
3
hriziya

지금까지 답변을 혼합하고 추가합니다. 모든 답변을 읽고 한동안 추가 조사하여 사용자의 현지 시간대 형식으로 db의 날짜 시간 문자열을 표시해야했기 때문입니다.

날짜 시간 문자열은 python/Django db에서 2016-12-05T15 : 12 : 24.215Z 형식으로 제공됩니다.

JavaScript에서 브라우저 언어를 안정적으로 감지하는 것이 모든 브라우저에서 작동하지 않는 것 같습니다 ( 브라우저 언어 기본 설정을 감지하는 JavaScript 참조). 그래서 서버에서 브라우저 언어를 얻습니다.

Python/Django : 요청 브라우저 언어를 컨텍스트 매개 변수로 보냅니다.

language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })

HTML : 숨겨진 입력으로 작성하십시오.

<input type="hidden" id="browserlanguage" value={{ language }}/>

자바 스크립트 : 숨겨진 입력의 가치를 얻으십시오. en-GB, en-US; q = 0.8, en; q = 0.6/그런 다음 바꾸기 및 정규식을 통해서만 목록의 첫 번째 언어를 가져옵니다

const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "$1");

JavaScript : 날짜/시간으로 변환하고 형식을 지정하십시오.

var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);

참조 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

결과는 다음과 같습니다 (브라우저 언어는 en-gb입니다) : 05/12/2016, 14:58

3
Anja

내가 찾은 가장 좋은 해결책은 [time display = "llll"datetime = "UTC TIME"/] 태그를 만들고 javascript (jquery)를 사용하여 사용자 시간을 기준으로 구문 분석하고 표시하는 것입니다.

http://momentjs.com/ Moment.js

시간을 멋지게 표시합니다.

2
Daniel

GMT의 시간대 오프셋을 분 단위로보고하는 다음을 사용할 수 있습니다.

new Date().getTimezoneOffset();

참고 :-이 함수는 음수를 반환합니다.

2
dave

getTimeZoneOffset () 및 toLocaleString은 기본 날짜 작업에 적합하지만 실제 시간대 지원이 필요한 경우 mde 's TimeZone.js 를 참조하십시오.

이 질문 에 대한 답변에서 몇 가지 옵션이 더 있습니다.

1
Aeon
// new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
var serverDate = new Date(2018, 5, 30, 19, 13, 15); // just any date that comes from server
var serverDateStr = serverDate.toLocaleString("en-US", {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
})
var userDate = new Date(serverDateStr + " UTC");
var locale = window.navigator.userLanguage || window.navigator.language;

var clientDateStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
});

var clientDateTimeStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

console.log("Server UTC date: " + serverDateStr);
console.log("User's local date: " + clientDateStr);
console.log("User's local date&time: " + clientDateTimeStr);
1
Sergey

날짜를 현지 날짜로 변환하려면 toLocaleDateString () 메서드를 사용하십시오.

var date = (new Date(str)).toLocaleDateString(defaultlang, options);

시간을 현지 시간으로 변환하려면 toLocaleTimeString () 메서드를 사용하십시오.

var time = (new Date(str)).toLocaleTimeString(defaultlang, options);
0
Codemaker