Pass value from apex component to controller

Question

I have a visualforce force component:

<apex:component controller="NewITAssetController">
   <apex:outputPanel>                
        <label>Date field</label>                
        <div class="row">
            <div class="col">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <apex:input type="text" value="{!ExpectedDate}" styleClass="form-control datetimepicker-input" html-data-id="expecteddateofdelivery" html-data-target="#datetimepicker1" html-onInput="setvalue();" onkeydown="return false"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>                            
            </div>
            <script type="text/javascript">
            j$(function () {
                j$('#datetimepicker1').datetimepicker({
                    format: 'DD/MM/YYYY'
                });
            });
            </script>
        </div>                
    </apex:outputPanel>
</apex:component>

Also have a visualforce page:

<apex:page controller="NewITAssetController" standardStylesheets="false" showHeader="false" sidebar="false" doctype="html-5.0" title="New IT Item">
   <apex:form id="Form" styleClass="bg-light">
       <apex:actionFunction name="setvalue" action="{!SetValue}" rerender="expecteddateofdelivery"/>
       <c:AssetInput />
   </apex:form>
</apex:page>

And Controller:

public class NewITAssetController {
    public String ExpectedDate {get;set;}

    public void SetValue(){
        system.debug('ExpectedDate='+ExpectedDate);
    }
}

But when I set the value for input field debug says that this field is null. What I'm doing wrong?

Answer 1

The component's controller is distinct from the page's controller. To pass the value back to the page, you'd need to pass in the controller through an attribute:

Component (Parts)

<apex:component>
<apex:attribute name="controller" type="NewITAssetController" description="page controller" required="true">

...

<apex:input type="text" value="{!controller.ExpectedDate}" styleClass="form-control datetimepicker-input" html-data-id="expecteddateofdelivery" html-data-target="#datetimepicker1" html-onInput="setvalue();" onkeydown="return false"/>

Controller

public class NewITAssetController {
    public String ExpectedDate {get;set;}
    public NewItAssetController getSelf() {
        return this;
    }
    public void SetValue(){
        system.debug('ExpectedDate='+ExpectedDate);
    }
}

Page

<c:AssetInput controller="{!self}" />