[英]How can I format the date coming from the server to date format of client machine?
I'm using react.js to my web page, and I want to know how to get the server's date and put it according the client's country format.我在我的 web 页面上使用 react.js,我想知道如何获取服务器的日期并根据客户端的国家/地区格式放置它。
Example: birthday at server: 2002-22-12 birthday the way that I want, if the client is brazilian: 22/12/2002示例:服务器生日:2002-22-12 我想要的生日,如果客户是巴西人:22/12/2002
Thanks.谢谢。
I have seen other questions about date, but they just get the real date and format it.我看过其他关于日期的问题,但他们只是获取真实日期并对其进行格式化。 I need to get it from the API/backend.
我需要从 API/后端获取它。
When it comes to working with dates on client-side (no matter which framework I use) - I always use moment.js package https://momentjs.com/在客户端处理日期时(无论我使用哪种框架)——我总是使用 moment.js package https://momentjs.com/
That's pure-js library with 0 dependencies, so it's able to work with any front-end technology on one hand, and it's easy to achieve any date-related operation with small amount of code on the other hand, fe那是0依赖的纯js库,所以一方面可以和任何前端技术对接,另一方面可以用少量的代码轻松实现任何日期相关的操作,fe
moment().format('MMMM Do YYYY, h:mm:ss a');
For your specific case to format date in current locale format you just have to do following:对于以当前语言环境格式格式化日期的特定情况,您只需执行以下操作:
let date = Date.now();
let dateMoment = moment(date);
console.log(dateMoment.format('L')); // 01/06/2023
If you'd like to have all your dates formatted in non-current locale, please change it explicitly, I referenced this article Locale detection with Moment.js :如果您想将所有日期格式化为非当前语言环境,请明确更改它,我参考了这篇文章Locale detection with Moment.js :
moment.locale('ar');
let yourDateVariable = Date.now();
let yourDateMoment = moment(yourDateVariable);
console.log(yourDateMoment.format()); // ٢٠٢٣-٠١-٠٦T١٦:٣٤:١٩+٠٣:٠٠
Finally, to get current browser locale (if needed), please try following:最后,要获取当前浏览器区域设置(如果需要),请尝试以下操作:
var locale = window.navigator.userLanguage || window.navigator.language;
Initiallly, It's a best practice to get dates from server in ISO-8601 format YYYY-MM-DDTHH:mm:ss.sssZ
.最初,最佳做法是以 ISO-8601 格式
YYYY-MM-DDTHH:mm:ss.sssZ
从服务器获取日期。 That helps us handle dates in a better way.这有助于我们更好地处理日期。
Nowadays, the native Intl API has a good browser support and we can use it easily to achieve that:现在,原生的Intl API有很好的浏览器支持,我们可以很容易地使用它来实现:
const dateInIsoFormatFromServer = "2022-06-03T19:38:34.203Z";
const date = new Date(dateInIsoFormatFromServer);
const formatter1 = new Intl.DateTimeFormat("en-US");
console.log("Format for United States locale: ", formatter1.format(date));
// Format for United States locale: 6/3/2022
const formatter2 = new Intl.DateTimeFormat("pt-BR");
console.log("Format for Brasil locale: ", formatter2.format(date));
// Format for Brasil locale: 03/06/2022
const formatter3 = new Intl.DateTimeFormat("es-AR");
console.log("Format for Argentina locale: ", formatter3.format(date));
// Format for Argentina locale: 3/6/2022
Locale string here could be sent from server to set in Intl.DateTimeFormat
method.此处的区域设置字符串可以从服务器发送到
Intl.DateTimeFormat
方法中进行设置。 However, you could get the locale from user browser with navigator object and dinamically set that locale to formatter:但是,您可以使用导航器 object 从用户浏览器获取区域设置,并将该区域设置动态地设置为格式化程序:
const dateInIsoFormatFromServer = "2022-06-03T19:38:34.203Z";
const date = new Date(dateInIsoFormatFromServer);
const browserLocale =
window.navigator.language || window.navigator.browserLanguage;
const formatter1 = new Intl.DateTimeFormat(browserLocale);
console.log("Format for browser locale: ", formatter1.format(date));
// Format for browser locale: 03/06/2022
// * My browserLocale is pt-BR
if necessary, you can set options to customize the format output:如有必要,您可以设置选项来自定义格式 output:
const dateInIsoFormatFromServer = "2022-06-03T19:38:34.203Z";
const date = new Date(dateInIsoFormatFromServer);
const browserLocale =
window.navigator.language || window.navigator.browserLanguage;
const options = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
hour12: false
};
const formatter1 = new Intl.DateTimeFormat(browserLocale, options);
console.log("Format for browser locale with options: ", formatter1.format(date));
// Format for browser locale with options: 03/06/2022 12:38:34
// * My browserLocale is pt-BR
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.