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 1182 posts 3441 karma points MVP 4x 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 4996 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 2726 posts 8320 karma points MVP 4x 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 1182 posts 3441 karma points MVP 4x 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 4996 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 1182 posts 3441 karma points MVP 4x 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 4996 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 1182 posts 3441 karma points MVP 4x 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 4996 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 1182 posts 3441 karma points MVP 4x c-trib
    Aug 08, 2011 @ 17:32
    Bjarne Fyrstenborg
    0

    Thanks :)

    I works great now..

    Bjarne 

  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x 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 4996 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies