Pass the input of the date picker to class (using JavaScript) #inSalesforce

Pass the input of the date picker to class (using JavaScript)  #inSalesforce

page:

<apex:page controller="datePickerController">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>
    <script>
    $(function() {
        $("#datepicker").datepicker({ dateFormat: 'd/m/yy'});
    });
    function setValHidden(ele){
        var dateval = $(ele).val();
        $('input[id$=hiddenfield]').val(dateval)
    }
    </script>
    <apex:form >
        <input value="{!sampleDate}" type="text" id="datepicker" html-placeholder="Enter Date" onchange="setValHidden(this)" label = "Enter Date"/>
        <apex:inputhidden value="{!sampleDate}" id="hiddenfield"/>
        <apex:commandButton action="{!UpdateDate}" title="Save" value="Save"/>
    </apex:form>
</apex:page>

class:

public class datePickerController {
    public String sampleDate { get; set; }
    public datePickerController(){
        Date theDate = system.today();
        system.debug('!!!theDate!!!!'+theDate);
        sampleDate = DateTime.newInstance(theDate.year(),theDate.month(),theDate.day()).format('D/M/YYYY');
    }
    public void UpdateDate(){
        system.debug('!!!sampleDate!!!!'+sampleDate);
        Date theDate = Date.parse(sampleDate);
        system.debug('!!!theDate!!!!'+theDate);
    }
}