[英]How to format DateTime in DateFNS when using another format to show the Date?
I'm integrating a Front End built in React with an Api built with GraphQL.我正在将 React 内置的前端与使用 GraphQL 构建的 Api 集成。
I have the following text in the Api documentation for a DateTime field that I need to send in a Mutation:我在需要在 Mutation 中发送的 DateTime 字段的 Api 文档中有以下文本:
timeRegistered: DateTime
注册时间:日期时间
A date-time string at UTC, such as 2007-12-03T10:15:30Z, compliant with the date-time format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.
UTC 的日期时间字符串,例如 2007-12-03T10:15:30Z,符合 ISO 8601 标准的 RFC 3339 配置文件第 5.6 节中概述的日期时间格式,用于使用公历表示日期和时间日历。
scalar DateTime
标量日期时间
I'm also using Material UI and Date-FNS to get the Date Time picker to work.我还使用 Material UI 和 Date-FNS 来使日期时间选择器工作。 I need to show to the user the date in Brazil format:
我需要向用户显示巴西格式的日期:
janeiro 23º 12:35 pm
热内卢 23º 12:35 pm
How do I format the Date to that DateTime specific format present in the Docs (RFC 3339)?如何将日期格式化为文档 (RFC 3339) 中存在的特定日期时间格式? Because when sending the data to the api I need that format.
因为在将数据发送到 api 时我需要那种格式。
This really is a duplicate of How to format a JavaScript date , however here's an example of how to go about it.这确实是How to format a JavaScript date的副本,但是这里有一个如何去做的例子。
As luck would have it, the input timestamp format of YYYY-MM-DDTHH:mm:ssZ is supported by ECMA-262 and should be correctly parsed by all browsers in use so you can use the built–in parser to create a Date object:幸运的是,输入时间戳格式 YYYY-MM-DDTHH:mm:ssZ 受 ECMA-262 支持,并且应该被所有正在使用的浏览器正确解析,以便您可以使用内置解析器创建 Date 对象:
let date = new Date('2007-12-03T10:15:30Z');
As for formatting, you can use the Intl.DateTimeFormat.prototype.formatToParts method to get the parts of the date in the language you want, then format them as required.至于格式化,您可以使用Intl.DateTimeFormat.prototype.formatToParts方法以您想要的语言获取日期的部分,然后根据需要对其进行格式化。
In the following example:在以下示例中:
/* Get time in specifid location in Portuguese * @param {Date} date - date to format, default is the current date and time * @param {string} loc - IANA representative location for date * @returns {string} formatted timestamp */ function toPTString(date = new Date(), loc = 'America/Sao_Paulo') { // Formatter let formatPT = new Intl.DateTimeFormat('pt', { month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true, timeZone: loc, timeZoneName: 'short' }); // Values for timestamp let { day, month, hour, minute, dayPeriod, timeZoneName } = formatPT.formatToParts(date) .reduce((acc, part) => { acc[part.type] = part.value; return acc; }, Object.create(null)); // Reformat dayPeriod, eg PM to pm let dP = dayPeriod.toLowerCase().replace(/[^apm]/g, '').split('').join('.'); // '\°' is the degree symbol for ordinal day number return `${month} ${day}\° ${hour}:${minute} ${dP} ${timeZoneName}`; } // Examples [ null, // Defaults to -3 'America/Noronha', // -2 'America/Sao_Paulo', // -3 'America/Porto_Velho', // -4 'America/Rio_Branco' // -5 ].forEach(loc => console.log((loc || 'Default') + ': ' + (loc? toPTString(new Date(), loc) : toPTString()) ));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.