Copied to clipboard

Flag this post as spam?

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


  • Kate 267 posts 610 karma points
    Dec 03, 2012 @ 14:34
    Kate
    0

    How to set a date?

    Hi

    I have a piece of js code that I want to work in Umbraco.
    I'm making opening hours on a website.
    I would like to be able to see the opening hours of all days, but the weekday for today has to be highlighted.
    Something like this:

    Mon 9-15
    Tues 9-16
    <b> Wed 8-16 </ b>
    Thurs 9-16
    Fri 9-12

    Mon, Tues, Thurs and Friday is faded out and Wednesday are in bold.

    I shall then have it to automatically switch :-)

    The code I have for this is:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .bold{
    font-family:arial, helvetica; font-size:12px; font-weight:bold;
    }
    .gray{
    color:gray;
    }
    </style>
    <script type="text/javascript">
    function marker(){
    var weekday=Array("søn","man","tir","ons","tor","fre","lør");
    var d = new Date();
    var n = d.getDay();
    if(n==0 || n==5 || n==6);
    else document.getElementById(weekday[n]).className="bold";
    }
    </script>
    </head>
    <body>
    <div class ="gray" id="man">man 9-15</div>
    <div class ="gray" id="tir">tir 9-16</div>
    <div class ="gray" id="ons">ons 8-16</div>
    <div class ="gray" id="tor">tor 9-16</div>
    <div class ="gray" id="fre">fre 9-12</div>
    <script type="text/javascript">
    marker();
    </script>
    </body>
    </html>

    My problem is that I would like it to work serverside, instead of relying on the time set on the users computer.

    Can anybody help me. :-)

    I have no ide if I should write this in a macro or somewere else.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Dec 03, 2012 @ 18:25
    Jan Skovgaard
    0

    Hi Kate

    There should not be any need for having inline JavaScript above.

    I believe you should be able to use the built in Umbraco XSLT extension called umbraco.library:CurrentDate() to compare with the chosen dates and then hightlight the date that matches the current one.

    If you just need to highlight the weekday you can format the date returned by CurrentDate() using the umbraco.library:FormatDateTime() extension.

    Hope the above pointers make sense - let me know if you need further explanation.

    /Jan

  • SC Digital Services Team 104 posts 171 karma points
    Dec 03, 2012 @ 18:35
    SC Digital Services Team
    1

    It should be fairly easy to set this up in a macro using Razor.  You can retrieve the day from the server time using this:

    @DateTime.Now.DayOfWeek

    You should then be able to loop through your opening hours and construct your markup, comparing each day with the the one set on server and adding your class when it matches.

  • Kate 267 posts 610 karma points
    Dec 03, 2012 @ 21:37
    Kate
    0

    Hi

    Im trying to use Razor, but I have never tried that before. Im getting an arror when i try making an if()

    This is what I have done so fare ;-)

    @using umbraco.MacroEngines;
    @inherits umbraco.MacroEngines.DynamicNodeContext
    @{
    var dateWeek = @DateTime.Now.DayOfWeek;
    @dateWeek;

    if (dateWeek == "Monday"){
    monday
    }
    }

    What im I doing wrong?

  • Kate 267 posts 610 karma points
    Dec 03, 2012 @ 22:49
    Kate
    0

    Hi Jan

    I have also tried your exampel and it looks like it works. Now I would like to get a weekly number out and not the word "Monday".
    Monday = 1
    Tuesday = 2
    ...

    next monday = 1 (again)

    Then I can use it in an <xsl:choose>

    This is what I got so fare:

    <xsl:variable name="datoweek" select="umbraco.library:FormatDateTime(umbraco.library:CurrentDate(), 'dddd') "/>

    <xsl:template match="/">

    <!-- start writing XSLT -->

    <xsl:choose>
    <xsl:when test="$datoweek = 'mandag'">
    <xsl:value-of select="'mandag'"/>
    </xsl:when>
    <xsl:when test="$datoweek = 'fredag'">
    <xsl:value-of select="'fredag'"/>
    </xsl:when>
    <xsl:otherwise>
    <xsl:value-of select="'something else'"/>
    </xsl:otherwise>
    </xsl:choose>
    </xsl:template>

     

     


  • Kate 267 posts 610 karma points
    Dec 04, 2012 @ 00:12
    Kate
    0

    It works now :-)

    I used: <xsl:variable name="today" select="Exslt.ExsltDatesAndTimes:dayinweek()"/>


  • Kate 267 posts 610 karma points
    Dec 04, 2012 @ 12:35
    Kate
    0

    Hi Jan and SC web Team

    Thanks for pointing me in the right direction.

    I made it work i xslt but I have not figured it out in Razor yet ;-)

    Here is what I ended up with

    <xsl:variable name="today" select="Exslt.ExsltDatesAndTimes:dayinweek()"/>

    <xsl:template match="/">

    <!-- start writing XSLT -->

    <div class="openinghoures">
    <table>
    <tr>
    <xsl:if test="$today = '2'">
    <xsl:attribute name="class">
    <xsl:text>select</xsl:text>
    </xsl:attribute>
    </xsl:if>
    <td>Mandag:</td>
    <td><xsl:value-of select="$currentPage/open1" /> - <xsl:value-of select="$currentPage/close1" /></td>
    </tr>
    <tr>
    <xsl:if test="$today = '3'">
    <xsl:attribute name="class">
    <xsl:text>select</xsl:text>
    </xsl:attribute>
    </xsl:if>
    <td>Tirsdag:</td>
    <td><xsl:value-of select="$currentPage/open2" /> - <xsl:value-of select="$currentPage/close2" /></td>
    </tr>
    <tr>
    <xsl:if test="$today = '4'">
    <xsl:attribute name="class">
    <xsl:text>select</xsl:text>
    </xsl:attribute>
    </xsl:if>
    <td>Onsdag:</td>
    <td><xsl:value-of select="$currentPage/open3" /> - <xsl:value-of select="$currentPage/close3" /></td>
    </tr>
    <tr>
    <xsl:if test="$today = '5'">
    <xsl:attribute name="class">
    <xsl:text>select</xsl:text>
    </xsl:attribute>
    </xsl:if>
    <td>Torsdag:</td>
    <td><xsl:value-of select="$currentPage/open4" /> - <xsl:value-of select="$currentPage/close4" /></td>
    </tr>
    <tr>
    <xsl:if test="$today = '6'">
    <xsl:attribute name="class">
    <xsl:text>select</xsl:text>
    </xsl:attribute>
    </xsl:if>
    <td>Fredag:</td>
    <td><xsl:value-of select="$currentPage/open5" /> - <xsl:value-of select="$currentPage/close5" /></td>
    </tr>
    <tr>
    <xsl:if test="$today = '7'">
    <xsl:attribute name="class">
    <xsl:text>select</xsl:text>
    </xsl:attribute>
    </xsl:if>
    <td>Lørdag:</td>
    <td><xsl:value-of select="$currentPage/open6" /> <xsl:value-of select="$currentPage/close6" /></td>
    </tr>
    </table>
    </div>




    </xsl:template>



    Thanks again :-)

Please Sign in or register to post replies

Write your reply to:

Draft