Question

有没有办法使用CSS格式化使用特定格式的日期，例如YYYY / MM / DD，或MM / DD / YYYY，是否有时间？

也可以将数字格式化为具有2位小数的百分比值，例如5.4321987显示为5.43％

我可能会使用Javascript，但我想首先知道是否可以使用CSS来执行此操作？

谢谢！

Answer 1

Css不能用于格式化日期。使用php或javascript来执行此操作。

Answer 2

CSS不支持日期格式化。您无法使用css格式化日期。

这里让我分享替代选项，除了javascript有可用的html5元素可以帮助你。

您可以使用time-element。这个html元素将帮助您合成并显示日期。

注意：在使用之前，请确保并阅读此元素的浏览器支持如果您将在公共HTML页面中使用。

Answer 3

CSS无法做到这一点。您需要使用JavaScript。

Answer 4

是的，可以仅使用CSS格式化日期。这包括更改年/月/日的显示顺序，日期之间的分隔符，显示/隐藏前导零，将4位数字的年份显示为2位数字的年份（例如1994年变为'94），可以扩展为包括小时/分钟/秒等，甚至可以在段落中内联。它允许稍后使用CSS重新格式化静态HTML。这提供了极大的灵活性，不需要学习Java脚本，而且我自己使用它来格式化Anki卡（使用HTML和CSS）上的日期格式。

首先有一些限制：它不适用于较旧的浏览器，需要修改源HTML，并且要求源日期前导零保持一致（始终存在或始终不存在），并且它不是特别优雅。如果您已经知道Javascript，那将是一个更强大，更优雅的解决方案。

该解决方案使用flexbox来允许更改元素的顺序，并将日期值放在HTML自定义属性中，以便CSS可以读取。在下面的示例中，单击运行代码段，以了解如何使用CSS将day=3，month=9和year=1994格式化为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: "\00a0"; }   /* \00a0 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"; }

<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>

使用相同的搜索和替换技术，可以将数字显示转换为百分比，但是由于日期是有限的（只能处理12个月和31天），但是数字是无限的，所以这仅在处理数字时有用在很小的范围内。例如，如果您只将3.59更改为3.6％，那么这很容易。除此之外，Java脚本或其他脚本将更加优雅。

/* Display 3.59 as 3.6% */
.num-to-percent[val="3.59"]::after{ content:"3.6%"; }

<span class="num-to-percent" val="3.59"></span>

Answer 5

我认为CSS不能格式化日期或百分比格式。

如果你想格式化日期或百分比格式，我认为如果你使用PHP

是最好的

使用CSS格式化日期/时间或百分比值？

5 个答案: