Html 使用 CSS 格式化日期/时间或百分比值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29359486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use CSS to format date/time or percent value?
提问by pdube
Is there a way to use CSS to format a date using a specific format, e.g. YYYY/MM/DD, or MM/DD/YYYY, with or without time?
有没有办法使用 CSS 使用特定格式（例如 YYYY/MM/DD 或 MM/DD/YYYY，带或不带时间）格式化日期？
Also can a number be formatted as a percentage value with 2 decimals, e.g. 5.4321987 displayed as 5.43%
也可以将数字格式化为带有 2 个小数的百分比值，例如 5.4321987 显示为 5.43%
I could probably use JavaScript but I want to know first if it's possible to use CSS to do this?
我可能会使用 JavaScript，但我想先知道是否可以使用 CSS 来做到这一点？
回答by Kris Hatcher
CSS cannot accomplish this. You'll need to use JavaScript.
CSS无法做到这一点。您需要使用 JavaScript。
回答by Abhishek M
Css cant be used to formate date. Use php or javascript to do so.
Css 不能用于格式化日期。使用 php 或 javascript 来执行此操作。
回答by Micah Lindstrom
Yes, it is possible to format dates with only CSS. This includes changing year/month/day display order, the separators between the dates, showing/hiding leading zeroes, display 4-digit years as 2-digit years (e.g. 1994 becomes '94), can be extended to include hours/minutes/seconds/etc., and even works inline within a paragraph. It allows static HTML to be reformatted later just with CSS. This provides great flexibility, doesn't require learning Javascript, and I'm using it myself to format dates on Anki cards (which use HTML and CSS).
是的，可以仅使用 CSS 来格式化日期。这包括更改年/月/日显示顺序、日期之间的分隔符、显示/隐藏前导零、将 4 位数年份显示为 2 位数年份（例如 1994 年变为 '94），可以扩展为包括小时/分钟/秒/等，甚至可以在段落内内联工作。它允许稍后仅使用 CSS 重新格式化静态 HTML。这提供了很大的灵活性，不需要学习 Javascript，而且我自己使用它来格式化 Anki 卡片（使用 HTML 和 CSS）上的日期。
First some limitations: it won't work on older browsers, it requires modifying the source HTML, and it requires source date leading zeros to be consistent (either always present or always absent), and it's not particularly elegant. If you already know Javascript, that's going to be a more powerful and more elegant solution.
首先是一些限制：它不能在旧浏览器上工作，它需要修改源 HTML，并且它需要源日期前导零保持一致（始终存在或始终不存在），并且它不是特别优雅。如果您已经了解 Javascript，那将是一个更强大、更优雅的解决方案。
The solution uses a flexbox to allow changing the order of the elements, and puts the date values in HTML custom attributes to be able to be read by the CSS. Click Run Code Snippeton the example below to see how day=3, month=9, and year=1994is formatted with CSS into March 09, '94.
该解决方案使用 flexbox 来允许更改元素的顺序，并将日期值放在 HTML 自定义属性中以便 CSS 能够读取。点击Run Code Snippet下面的例子来看看如何day=3，month=9以及year=1994被格式化成CSS March 09, '94。
<div class="date-wrapper">
<div class="date-year" val="1994"></div>
<div class="date-month" val="03"></div>
<div class="date-day" val="09"></div>
</div>
/* Setup for date flexbox */
.date-wrapper {
align-items: baseline;
background: #f00;
display: inline-flex;
}
.date-year,
.date-month,
.date-day {
display: inline-block;
}
/* Set date display order */
.date-year { order: 3; }
.date-month { order: 1; }
.date-day { order: 2; }
.date-suffix { order: 4; }
/* Display dates based on "val" custom attribute in HTML */
.date-year::after,
.date-month::after,
.date-day::after {
content: attr(val);
}
/* Add separators */
.date-year::before { content: ", "; }
.date-month::before { content: "★"; }
.date-day::before { content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis lacus non risus consectetur aliquet. Duis placerat ac nulla eu
<span class="date-wrapper">
<span class="date-year" val="1994"></span>
<span class="date-month" val="3"></span>
<span class="date-day" val="9"></span>
<span class="date-suffix"></span>
</span>
lobortis. Integer vulputate, metus eget maximus pretium, nisl orci ultrices
quam, sit amet rutrum lacus neque vitae turpis.</p>
a0"; } /* /* Display 3.59 as 3.6% */
.num-to-percent[val="3.59"]::after{ content:"3.6%"; }
a0 is a non-breaking space */
.date-suffix::before { content: "★"; }
/* Convert month numbers to month text */
.date-month[ val="1"]:after{ content: "January"; }
.date-month[ val="2"]:after{ content: "February"; }
.date-month[ val="3"]:after{ content: "March"; }
.date-month[ val="4"]:after{ content: "April"; }
.date-month[ val="5"]:after{ content: "May"; }
.date-month[ val="6"]:after{ content: "June"; }
.date-month[ val="7"]:after{ content: "July"; }
.date-month[ val="8"]:after{ content: "August"; }
.date-month[ val="9"]:after{ content: "September"; }
.date-month[val="10"]:after{ content: "October"; }
.date-month[val="11"]:after{ content: "November"; }
.date-month[val="12"]:after{ content: "December"; }
/* Add leading zero to days */
.date-day[val="1"]:after{ content: "01"; }
.date-day[val="2"]:after{ content: "02"; }
.date-day[val="3"]:after{ content: "03"; }
.date-day[val="4"]:after{ content: "04"; }
.date-day[val="5"]:after{ content: "05"; }
.date-day[val="6"]:after{ content: "06"; }
.date-day[val="7"]:after{ content: "07"; }
.date-day[val="8"]:after{ content: "08"; }
.date-day[val="9"]:after{ content: "09"; }
/* Display 4-digit years as 2-digit years (e.g. 1994 becomes '94) */
/* As far as I can tell, doing this fully requires 100 lines of CSS which kinda sucks */
.date-year[val="1990"]:after{ content: "'90"; }
.date-year[val="1991"]:after{ content: "'91"; }
.date-year[val="1992"]:after{ content: "'92"; }
.date-year[val="1993"]:after{ content: "'93"; }
.date-year[val="1994"]:after{ content: "'94"; }
.date-year[val="1995"]:after{ content: "'95"; }
.date-year[val="1996"]:after{ content: "'96"; }
.date-year[val="1997"]:after{ content: "'97"; }
.date-year[val="1998"]:after{ content: "'98"; }
.date-year[val="1999"]:after{ content: "'99"; }<span class="num-to-percent" val="3.59"></span>Changing display of numbers into percents is possible with the same search-and-replace technique, but since dates are finite (only 12 months and 31 days to deal with) but numbers are infinite, this is only useful when dealing with numbers in a very small range. For example, if you're only ever changing 3.59 to 3.6%, then it's trivially easy. For anything else, Javascript or other scripting will be far more elegant.
使用相同的搜索和替换技术可以将数字显示更改为百分比，但由于日期是有限的（只有 12 个月零 31 天要处理）但数字是无限的，这仅在处理非常复杂的数字时有用小范围。例如，如果您只将 3.59 更改为 3.6%，那么这很容易。对于其他任何事情，Javascript 或其他脚本将更加优雅。
回答by Satyam Koyani
CSS doesn't support date formatting.You cannot format date with css.
CSS 不支持日期格式。您不能用 css 格式日期。
Here Let me share alternate option except javascript there is html5 element available which may can help you.
在这里，让我分享除 javascript 之外的替代选项，有可用的 html5 元素可以帮助您。
You can use time-elementfor this. This html element will help you to formate and display the date.
您可以为此使用时间元素。这个 html 元素将帮助您格式化和显示日期。
NOTE:Before using this please make sure and read the browser support of this element If you will use in public html pages.
注意：如果您将在公共 html 页面中使用，请在使用此之前确保并阅读此元素的浏览器支持。
回答by noezack
I don't think CSS can't format date or percentage format.
我认为 CSS 不能格式化日期或百分比格式。
If you want to format date or percentage format, I think it's the best if you use PHP
如果要格式化日期或者百分比格式，我觉得用PHP最好
