사용자의 로케일 형식 및 시간 오프셋으로 날짜/시간 표시
나는 서버가 HTML에서 항상 UTC로 날짜를 제공하고 클라이언트 사이트의 JavaScript가 사용자의 로컬 표준 시간대로 변환하도록 하기를 원합니다.
사용자의 로케일 날짜 형식으로 출력할 수 있다면 보너스입니다.
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일부 참조:
moment.js(2021년에 폐지됨)로 할 수 있습니다.
다음과 같이 UTC에서 날짜 문자열을 구문 분석하는 것이 가장 좋습니다(모든 브라우저에서 일관된 결과를 얻으려면 서버에 ISO-8601 호환 문자열을 작성하십시오).
var m = moment("2013-02-08T09:30:26Z");
이제 사용하기만 하면 됩니다.m응용 프로그램에서 moment.js는 기본적으로 디스플레이 작업을 위한 로컬 표준 시간대로 설정됩니다.날짜 및 시간 값의 형식을 지정하거나 값의 일부를 추출하는 방법은 여러 가지가 있습니다.
다음과 같은 사용자 로케일에서 모멘트 개체를 포맷할 수도 있습니다.
m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us
moment.js 개체를 다른 표준 시간대(즉, 로컬 시간대 또는 UTC 시간대)로 변환하려면 moment.js 표준 시간대 확장이 필요합니다.이 페이지에는 몇 가지 예가 나와 있습니다. 사용하기가 매우 간단합니다.
참고: Moment JS는 보다 현대적인 대안을 추천하므로, 새로운 프로젝트에 적합하지 않을 수 있습니다.
사용할 수 있습니다.new Date().getTimezoneOffset()/60시간대별로또한 다음이 있습니다.toLocaleString()사용자의 로케일을 사용하여 날짜를 표시하는 방법입니다.
전체 목록은 다음과 같습니다.날짜 작업
JS에서는 위에서 언급한 것처럼 각 속성을 변환하는 것 외에 로컬 날짜 시간을 형식화할 수 있는 단순하고 교차적인 플랫폼 방법이 없습니다.
여기에 로컬 YYY-MM-DD를 얻기 위해 사용하는 빠른 해킹이 있습니다.최종 날짜가 더 이상 올바른 표준 시간대를 갖지 않으므로(따라서 표준 시간대를 무시해야 함) 이것은 해킹입니다.더 필요한 것이 있으면 moment.js를 사용합니다.
var d = new Date();
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0, 10);
// 2017-05-09T08:24:26.581Z (but this is not UTC)
d.getTimezoneOffset()은 시간대 오프셋을 분 단위로 반환하며, d.getTime()은 밀리초 단위이므로 x 60,000입니다.
2021 - 브라우저 네이티브를 사용할 수 있습니다. Intl.Date 시간 형식
const utcDate = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat().format(utcDate));
// expected output: "21/04/2021", my locale is Switzerland
다음은 설명서의 직접적인 내용입니다.
const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
// Results below assume UTC timezone - your results may vary
// Specify default date formatting for language (locale)
console.log(new Intl.DateTimeFormat('en-US').format(date));
// expected output: "12/20/2020"
// Specify default date formatting for language with a fallback language (in this case Indonesian)
console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
// expected output: "20/12/2020"
// Specify date and time format using "style" options (i.e. full, long, medium, short)
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));
// Expected output "Sunday, 20 December 2020 at 14:23:16 GMT+11"
날짜 개체를 구성한 후에는 변환에 대한 일부 정보를 제공합니다.
함수는 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);
}
// 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);이전 프로젝트에서 사용한 내용은 다음과 같습니다.
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');
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');
사용자의 로컬 표준 시간대 형식으로 db의 날짜 시간 문자열을 표시하기 위해 잠시 동안 모두 읽고 추가 조사해야 했기 때문에 지금까지의 답변을 섞어 추가합니다.
datetime 문자열은 다음 형식의 python/djangoddb에서 가져옵니다. 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 }}/>
JavaScript: 숨겨진 입력 값(예: 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: datetime으로 변환하고 포맷:
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): 2016년 5월 12일, 14:58
그.getTimezoneOffset()오프셋을 분하며, GMT/UTC 시간대의 " 음수가 를 들어, 시간은 + +됩니다) method GMT/UTC는 "method"의 "westwards"입니다. 뉴욕 시간은 +240분 또는 +4시간으로 보고됨)
일반 시간대 오프셋을 시간 단위로 가져오려면 다음을 사용해야 합니다.
var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60
중요한 세부 정보:
일광 절약 시간은 결과에 반영되므로 이 방법을 사용하면 실제 지리적 시간대 오프셋이 아니라 실제로 시간 오프셋이 제공됩니다.
제가 찾은 가장 좋은 해결책은 [time display="lll" datetime="UTC TIME" /] 태그를 지정하고 javascript(jquery)를 사용하여 사용자의 시간을 기준으로 구문 분석 및 표시합니다.
http://momentjs.com/ Moment.js
시간이 잘 표시됩니다.
다음을 사용하여 GMT의 시간대 오프셋을 분 단위로 보고할 수 있습니다.
new Date().getTimezoneOffset();
참고: - 이 함수는 음수를 반환합니다.
getTimeZoneOffset() 및 toLocalString은 기본 날짜 작업에 적합하지만, 실시간 시간대 지원이 필요한 경우 mde의 TimeZone.js를 확인하십시오.
이 질문에 대한 답변에는 몇 가지 옵션이 더 논의됩니다.
날짜를 로컬 날짜로 변환하려면 LocalDateString() 메서드로 사용합니다.
var date = (new Date(str)).toLocaleDateString(defaultlang, options);
시간을 현지 시간으로 변환하려면 LocalTimeString() 메서드로 사용합니다.
var time = (new Date(str)).toLocaleTimeString(defaultlang, options);
아주 오래된 질문이지만 아마도 이것은 누군가가 이것에 비틀거리는 것을 도울 것입니다.아래 코드 형식은 사용자의 시간대 및 로케일에 해당하는 사용자 친화적인 형식의 ISO8601 날짜 문자열입니다.필요에 따라 조정합니다.예를 들어, 앱의 경우 1일, 1주, 1개월, 1년 이상의 날짜를 사용자에게 표시하는 데 시간, 분, 초가 중요합니까?
또한 응용 프로그램의 구현에 따라 주기적으로 다시 렌더링하는 것을 잊지 마십시오. (아래의 내 코드에서는 적어도 24시간마다 한 번씩)
export const humanFriendlyDateStr = (iso8601) => {
// Examples (using Node.js):
// Get an ISO8601 date string using Date()
// > new Date()
// 2022-04-08T22:05:18.595Z
// If it was earlier today, just show the time:
// > humanFriendlyDateStr('2022-04-08T22:05:18.595Z')
// '3:05 PM'
// If it was during the past week, add the day:
// > humanFriendlyDateStr('2022-04-07T22:05:18.595Z')
// 'Thu 3:05 PM'
// If it was more than a week ago, add the date
// > humanFriendlyDateStr('2022-03-07T22:05:18.595Z')
// '3/7, 2:05 PM'
// If it was more than a year ago add the year
// > humanFriendlyDateStr('2021-03-07T22:05:18.595Z')
// '3/7/2021, 2:05 PM'
// If it's sometime in the future return the full date+time:
// > humanFriendlyDateStr('2023-03-07T22:05:18.595Z')
// '3/7/2023, 2:05 PM'
const datetime = new Date(Date.parse(iso8601))
const now = new Date()
const ageInDays = (now - datetime) / 86400000
let str
// more than 1 year old?
if (ageInDays > 365) {
str = datetime.toLocaleDateString([], {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
// more than 1 week old?
} else if (ageInDays > 7) {
str = datetime.toLocaleDateString([], {
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
// more than 1 day old?
} else if (ageInDays > 1) {
str = datetime.toLocaleDateString([], {
weekday: 'short',
hour: 'numeric',
minute: 'numeric',
})
// some time today?
} else if (ageInDays > 0) {
str = datetime.toLocaleTimeString([], {
timeStyle: 'short',
})
// in the future?
} else {
str = datetime.toLocaleDateString([], {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
}
return str
}
영감을 받은 출처: https://alexwlchan.net/2020/05/human-friendly-dates-in-javascript/
Node.js를 사용하여 테스트됨
저는 백엔드 데이터베이스에서 센서 데이터를 수신하고 자바스크립트를 사용하여 딥슬레이 및 차트 작성을 위해 이 정보를 처리하기 위해 라벨을 사용하고 있습니다.제가 변환할 때 사용한 접근 방식은 다음과 같습니다.created_at내 지역 시간대로 가는 시간.
...
success: function(response){
$('#dht_data_table').html(""); //clear table data under silent table refresh
$.each(response.dht_data, function(key, dhtdata){ // cycle through table fetching sensor data
// convert data recorded time in local format
var dht_datatimestamp = new Date(dhtdata.created_at).toLocaleString("en-US", {
localeMatcher: "best fit",
timeZoneName: "short"
});
...
`dht_data` is the sensor data object from the database passed via jquery response in json format.
샘플 출력 결과는 다음과 같습니다.
7/3/2023, 12:38:27 PM GMT+3
로케일을 어떻게 하는지 모르지만 자바스크립트는 클라이언트 쪽 기술입니다.
usersLocalTime = new Date();
클라이언트의 시간 및 날짜가 표시됩니다(브라우저 및 사용자가 앉아 있는 컴퓨터에서 보고됨).응답에 서버의 시간을 포함하고 오프셋을 추측하기 위해 간단한 계산을 수행하는 것은 사소한 일입니다.
언급URL : https://stackoverflow.com/questions/85116/display-date-time-in-users-locale-format-and-time-offset
'source' 카테고리의 다른 글
| S3를 통해 Amazon CloudFront에서 gziped CSS 및 JavaScript 제공 (0) | 2023.09.03 |
|---|---|
| USB 장치의 데이터베이스 (0) | 2023.09.03 |
| MySQL의 특정 열을 업데이트한 후 트리거 실행 (0) | 2023.09.03 |
| SPA 프런트엔드를 위한 Spring Framework 5.3+, Spring Boot 2.3+ 라우팅 구성 (0) | 2023.09.03 |
| Galera 클러스터가 있는 MariaDB에서 파티션 회전 (0) | 2023.09.03 |