Populate Day value in apex:output using javascript

Question

I am trying to populate day of date in a list of SObject using JavaScript.

I have written logic for getting day it works fine. Now I have to set Day. Page-block table Day column code is

<apex:pageBlockTable value="{!IndividualSessionrap}" var="ffs" title="PageBlock Tab">
   <apex:column style="width:20px" headerValue="Sr No">       
      <apex:outputText value="{!ffs.session.Sr_No__c}"/>
   </apex:column>
   <apex:column style="width:250px" headerValue="Day">
      <apex:outputText id="day" value="{!ffs.session.Session_Day__c}"/>
   </apex:column>
   <apex:column style="width:230px;"  headerValue="Start Date/Time">
      <apex:input id="dateField" onChange="populateDay('{!$Component.dateField}','{!$Component.day}');return false;" type="date" value="{!ffs.startDate}"/>
   </apex:column>

JQuery for the code is

document.getElementById(DayId).value('Thursday');

This doesnt set the value for day.

Answer 1

You can get the day of the week from a date using date formatting in your outputText panel without any Javascript. See Visualforce Date formatting.

<apex:outputText value="{0, date, EEEE}">
    <apex:param value="{!myDateValue}" />
</apex:outputText>

If you want to use jQuery correctly, you should use it to select the element you want, then call text('value'). Since you are using an outputText, then its id is going to end with ($=) the value you specify ("day"). Because you are specifying these ids in a loop, you need to find the closest table row and then look within that for the correct outputText element.

Don't forget to include jQuery in your page. I usually just pull it from CDN.

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script>
    (function ($) {
        "use strict";
        var days = [
            "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
        ];
        $(function () {
            $('[id$="dateField"]').change(function () {
                var $this = $(this),
                    date = new Date($this.val()),
                    day = days[date.getDay()];
                $this.closest('tr').find('[id$="day"]').text(day);
            });
        });
    })(jQuery);
</script>