Split up @ArticleStartDate Month and Day to resemble a calendar page

Question

Using SharePoint 2013, I have a custom ItemStyle.xsl file where I have the following code:

<div class="articledate">
<xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate), 1033, 'MMM d')"/>
</div>

It currently shows up as August 18 like this.

What I would like to do is split it up in two - the Month and Day would be separate so I could style them to look like this icon for example.

Answer 1

I was able to get it to work with the code below using month, day 01-31, and abbreviated name of the day:

<div class="articledate">
<div class="ArticleMonth">
<xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate), 1033, 'MMM')"/>
</div>
<div class="ArticleDay">
<xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate), 1033, 'dd')"/>
</div>
<div class="ArticleDDay">
<xsl:value-of select="ddwrt:FormatDateTime(string(@ArticleStartDate), 1033, 'ddd')"/>
</div>
</div>