function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Arpit Vashishtha 7Arpit Vashishtha 7 

calculating day of week on component without controller js..

provided challange is: Create a Message of The Day component that displays different text based on an attribute...
https://developer.salesforce.com/trailhead/lex_dev/lightning_components/lightning_components_expressions

i completed this challenge but traihead is not accepting it.. it is giving me error. i.e. : 
Challenge not yet complete... here's what's wrong: 
The component is not evaluating the value of the 'DayOfTheWeek' attribute to determine what to display


but when i execute my component it gives me desired output....
Robert Williams 5Robert Williams 5
The challenge would not pass if I did not have the aura:if component actually evaluate the value of the DayOfWeek attribute.  I tried to just have one aura:if to determine if the DayOfWeek attribute was empty, but that still would not allow the challenge to pass.  

This is a hack if you ask me, but this is how I got Trailhead to accept my challenage.  

MOTD.cmp 
<aura:component implements="force:appHostable">
	<aura:attribute name="DayOfTheWeek" type="String" default=""/>
    <aura:attribute name="displayMessage" type="Boolean" default="false"/>
	<aura:handler name="init" value="{!this}" action="{!c.checkWeekday}"/>

    <aura:if isTrue="{!v.DayOfTheWeek == 'Sunday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>      
    <aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if> 
    <aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>      
    <aura:if isTrue="{!v.DayOfTheWeek == 'Wednesday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>   
    <aura:if isTrue="{!v.DayOfTheWeek == 'Thursday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>  
    <aura:if isTrue="{!v.DayOfTheWeek == 'Friday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>      
    <aura:if isTrue="{!v.DayOfTheWeek == 'Saturday'}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>      
    
</aura:component>
MOTDController.js 
({
        checkWeekday: function(component) {
            var d = new Date();
            var weekday = new Array(7);
            weekday[0]=  "Sunday";
            weekday[1] = "Monday";
            weekday[2] = "Tuesday";
            weekday[3] = "Wednesday";
            weekday[4] = "Thursday";
            weekday[5] = "Friday";
            weekday[6] = "Saturday";
            
            var n = weekday[d.getDay()];
            component.set("v.DayOfTheWeek", n);
    	    component.set("v.displayMessage", true);
        }
    })

Let me know if you find a better way.  Thanks.
 
Arpit Vashishtha 7Arpit Vashishtha 7
Thanks Robert... (y) It worked.... :)
Texas TolandTexas Toland
I think it's testing for "aura:if" and "v.DayOfTheWeek ==" e.g.: 
<aura:component >
  <aura:attribute name="DayOfTheWeek" type="String"/>
  <p>
    {!$Locale.labelForToday} is {!v.DayOfTheWeek}
    <aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
      <br/><em>Sounds like somebody's got a case of the Mondays!</em>
    </aura:if>
  </p>
</aura:component>

 
Ashish DeoAshish Deo
you are Right Texas.. :)
Frederic Lapierre 5Frederic Lapierre 5
You can have the MOTD.cmp from Robert Williams 5 calling this other simple attribute for geeting the name of the days from the current user;
  
<!--DayOfTheWeek-->
<aura:component >
	 <aura:attribute name="DayOfTheWeek" type="String"/>
     {!$Locale.nameOfWeekdays} is {!v.DayOfTheWeek}
</aura:component>
That's work fine too.
 
Somnath SharmaSomnath Sharma
 <aura:attribute name="DayOfTheWeek" type="String"/>
    <ui:inputText aura:id="dayname" label="Day"
                        value="{!v.DayOfTheWeek}"
                        required="true"/>
    <aura:if isTrue="{!v.DayOfTheWeek != ''}">
        <aura:if isTrue="{!v.DayOfTheWeek == 'Monday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
        <aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
        <aura:if isTrue="{!v.DayOfTheWeek == 'Wednesday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
        <aura:if isTrue="{!v.DayOfTheWeek == 'Thursday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
        <aura:if isTrue="{!v.DayOfTheWeek == 'Friday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
        <aura:if isTrue="{!v.DayOfTheWeek == 'Saturday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
        <aura:if isTrue="{!v.DayOfTheWeek == 'Sunday'}">
            Today is {!v.DayOfTheWeek}
        </aura:if>
    </aura:if>
Indira PadhiIndira Padhi
To refine robert code we can use 

  
<aura:component implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String" default=""/>
    <aura:attribute name="displayMessage" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.checkWeekdays}"/>
    
    

    <aura:if isTrue="{!v.displayMessage}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>      
      
    
</aura:component>



  
MOTDcontroller.js

({
        checkWeekdays: function(component) {
            var d = new Date();
            var weekday = new Array(7);
            weekday[0]=  "Sunday";
            weekday[1] = "Monday";
            weekday[2] = "Tuesday";
            weekday[3] = "Wednesday";
            weekday[4] = "Thursday";
            weekday[5] = "Friday";
            weekday[6] = "Saturday";
            
            var n = weekday[d.getDay()];
            component.set("v.DayOfTheWeek", n);
            component.set("v.displayMessage", true);
        }
    })

 
Paul StephensPaul Stephens
Slight modification of Indira's code, since 'DaysOfTheWeek' must be evaluated to pass the chapter:

MOTD.cmp 
<!--c:MOTD-->
<aura:component implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String"/>
    <aura:attribute name="displayMessage" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.checkWeekdays}"/>

    <aura:if isTrue="{!v.DayOfTheWeek == 'true'}">
        Today is <h1>{!v.displayMessage}</h1>!
    </aura:if>
    
</aura:component>

MOTDcontroller.js 
({
        checkWeekdays: function(component) {
            var d = new Date();
            var weekday = new Array(7);
            weekday[0]=  "Sunday";
            weekday[1] = "Monday";
            weekday[2] = "Tuesday";
            weekday[3] = "Wednesday";
            weekday[4] = "Thursday";
            weekday[5] = "Friday";
            weekday[6] = "Saturday";
            
            var n = weekday[d.getDay()];
            component.set("v.DayOfTheWeek", 'true');
            component.set("v.displayMessage", n);
        }
})

 
IshwarIshwar
Without controller it is not possible. Below is my code, its working and it passed the challenge.
Component:  
<aura:component implements="force:appHostable">
    <aura:attribute name="DayOfTheWeek" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.checkWeekday}"/>
    <aura:if isTrue="{!v.DayOfTheWeek=='Monday'}">Today is Monday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Tuesday'}">Today is Tuesday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Wednesday'}">Today is Wednesday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Thursday'}">Today is Thursday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Friday'}">Today is Friday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Saturday'}">Today is Saturday</aura:if>
    <aura:if isTrue="{!v.DayOfTheWeek=='Sunday'}">Today is Sunday</aura:if>
</aura:component>

Controller:  
({
	checkWeekday: function(component) {
            var d = new Date();
            var weekday = $A.get("$Locale.nameOfWeekdays");
            var n = weekday[d.getDay()].fullName;
            component.set("v.DayOfTheWeek", n);
        }
})

 
Arun KumarArun Kumar
Optimized working code

Component: 
<aura:component implements="force:appHostable">
	<aura:attribute name="DayOfTheWeek" type="String" />    
	<aura:handler name="init" value="{!this}" action="{!c.checkWeekday}"/>

    <aura:if isTrue="{!(v.DayOfTheWeek == 'Monday') || 
                     	(v.DayOfTheWeek == 'Tuesday') ||
                     	(v.DayOfTheWeek == 'Wednesday') ||
                     	(v.DayOfTheWeek == 'Thursday') ||
                     	(v.DayOfTheWeek == 'Friday') ||
                     	(v.DayOfTheWeek == 'Saturday') ||
                     	(v.DayOfTheWeek == 'Sunday')
                     }">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>
</aura:component>

Controller: 
({
    checkWeekday: function(component) {
        var d = new Date();
        var weekdays = $A.get("$Locale.nameOfWeekdays");
        var n = weekdays[d.getDay()].fullName;
        component.set("v.DayOfTheWeek", n);            
    }
})

 
Arun KumarArun Kumar
Also to test in App: 
<!-- "MOTD" is the name of component-->
<aura:application >
<h1>Test WeekDay!</h1>
<c:MOTD />
</aura:application>
Chirag GulatiChirag Gulati
We actually don't need a controller for this. Try this: 
<aura:component >
     <aura:attribute name="DayOfTheWeek" type="String" default="Tuesday" />
    <aura:if isTrue="{!v.DayOfTheWeek == 'Tuesday'}">
            Today is {!v.DayOfTheWeek}
            <aura:set attribute="else">
                Today is not {!v.DayOfTheWeek}
            </aura:set>
        </aura:if>
</aura:component>
Suraj Tripathi 47Suraj Tripathi 47
Hi Arpit,

use this code: 
<aura:handler name="init" value="{!this}" action="{!c.checkWeekdays}"/>
    
    

    <aura:if isTrue="{!v.displayMessage}">
        <h1>Today is {!v.DayOfTheWeek}</h1>
    </aura:if>
 
 If you find your Solution then mark this as the best answer.

 

  Thank you!


  Regards,
  Suraj Tripathi