Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Aug 08, 2011 @ 15:39
    Bjarne Fyrstenborg
    0

    Styling a date

    Hi

    I have a news date in my xslt like this:
    <class="news_date"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'd MMM yyyy')"/></p>

    But how can I e.g. wrap the day inside a span tag and the same with month and year, so I am able to style day, month and year in different ways?

    So I will have a look like the icon above from the CWS project..

    Bjarne

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 08, 2011 @ 15:43
    Tom Fulton
    2

    Hi Bjarne,

    You can use the format string to pull just the parts you need, and write them out separately, eg:

    <p class="news_date">
    <span class="month"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'MMM')"/></span>
    <span class="day"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'd')"/></span>
    <span class="year"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'yyyy')"/></span>
    </p>

    Then of course you can use CSS to target each separately and layout the way you like.

    Hope this helps,
    Tom

  • Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib
    Aug 08, 2011 @ 15:45
    Chriztian Steinmeier
    2

    Hi Bjarne,

    I'd do something like this:

    <xsl:template match="* | @*" mode="date">
        <xsl:variable name="year" select="substring(., 1, 4)" />
        <xsl:variable name="month" select="substring(., 6, 2)" />
        <xsl:variable name="date" select="substring(., 9, 2)" />
    
        <time datetime="{.}" class="newsDate">
            <span class="d">
                <xsl:value-of select="$date" />
            </span>
            <span class="m">
                <xsl:value-of select="$month" />
            </span>
            <span class="y">
                <xsl:value-of select="$year" />
            </span>
        </time>
    </xsl:template>

    - and then use it like this:

    <xsl:apply-templates select="newsDate" mode="date" />

    /Chriztian

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Aug 08, 2011 @ 16:06
    Bjarne Fyrstenborg
    0

    Hi both..

    I guess both suggestions will solve my problem, but I have chosen Toms suggestion.
    I will give you both a high five :)

    Tom, somehow I get this output: aug09-08-20112011
    That's a bit weird with the day format.. it looks similar to the the way I formattet the day before, but I don't get just a 9 but the whole date: 09-08-2011 ... hmm

    Bjarne

     

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 08, 2011 @ 16:14
    Tom Fulton
    0

    Sounds like the format string might be messed up?  Are you just using 'd'?  Maybe try dd just to test?  Maybe paste your code here also

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Aug 08, 2011 @ 16:24
    Bjarne Fyrstenborg
    0

    I have this in my xslt:

    <class="news_date">
                     <span class="month"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'MMM')"/></span>
                     <span class="day"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'd')"/></span>
                     <span class="year"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'yyyy')"/></span>
                  </p>

    It gives me a xslt error popup bubble, when saving with d, but it works with dd .
    But then I get 09 .. and in this case I think it looks better with just a 9.

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 08, 2011 @ 16:43
    Tom Fulton
    1

    That's really weird, I get the same results when using 'd' but 'dd' works.

    In leiu of finding the actual problem/fix, you could do a cheesy workaround by using 'dd' and testing for the leading 0 and remove it if needed.  Or Chriztian might have a better way :)

    <xsl:choose>
        <xsl:when test="substring(umbraco.library:FormatDateTime(./newsDate, 'dd'), 1, 1) = '0'">
          <xsl:value-of select="substring(umbraco.library:FormatDateTime(./newsDate, 'dd'), 2, 1)"/>
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'dd')"/>      
        </xsl:otherwise>
      </xsl:choose>

    -Tom

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Aug 08, 2011 @ 17:11
    Bjarne Fyrstenborg
    0

    Thanks for the workaround Tom..
    That might be a fix of the problem..

    I have tried another way too, with a empty space:

    <class="news_date">
                     <span class="day"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, ' d')"/></span>
                     <span class="month"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'MMM')"/></span>
                     <span class="year"><xsl:value-of select="umbraco.library:FormatDateTime(./newsDate, 'yyyy')"/></span>
                  </p>

    It doesn't have any particular importance for the frontend look, just that a get a empty space in the code: <span class="day"> 9</span>

    If one of you find any solutions of that strange bug, let me know :)

    Bjarne

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 08, 2011 @ 17:23
    Tom Fulton
    1

    Strange.  In that case you could just wrap the call in Replace to replace the space if needed:

    <xsl:value-of select="umbraco.library:Replace(umbraco.library:FormatDateTime(./newsDate, ' d'), ' ','')"/>

    Glad you got it figured out!

    -Tom

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Aug 08, 2011 @ 17:32
    Bjarne Fyrstenborg
    0

    Thanks :)

    I works great now..

    Bjarne 

  • Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib
    Aug 08, 2011 @ 17:46
    Chriztian Steinmeier
    2

    Hi Tom+Bjarne,

    The 'd' is a special case of the FormatDateTime() function - it returns a "Short date format for current culture"

    /Chriztian

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Aug 08, 2011 @ 17:48
    Tom Fulton
    0

    Good find Chriztian!  Very weird, so I guess there's no built in way to use 'd' without a hack like the above.  Perhaps that should be updated at some point...

    -Tom

Please Sign in or register to post replies

Write your reply to:

Draft