How to pass input of date picker to controller

Question

Since I have been looking for a date picker which I can format on a visualforce page for a foce.com site I found that salesforce is very limited. I found the following example which I can format and is working. How do I bind this to a field or send the input to my apex controller?

Code

<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: 'dd-mm-yy'});
});
</script>

<input value="{!Job__c.date__c}" type="text" id="datepicker" html-placeholder="Please fill in a date" />

Answer 1

Apex Page :

<apex:page controller="datectrl">
<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: 'm/d/yy'});
});
function setValHidden(ele){
    var dateval = $(ele).val();
    $('input[id$=hiddenfield]').val(dateval)
}
</script>
<apex:form >
<input value="{!datevalue}" type="text" id="datepicker" html-placeholder="Please fill in a date" onchange="setValHidden(this)"/>
<apex:inputhidden value="{!datevalue}" id="hiddenfield"/>
<apex:commandButton action="{!updatedval}" title="Save" value="Save"/>
</apex:form>
</apex:page>

ApexClass

public class datectrl {

public String datevalue { get; set; }
public datectrl(){
    date dtt = system.today();
    datevalue = DateTime.newInstance(dtt.year(),dtt.month(),dtt.day()).format('M/d/YYYY');
}
public void updatedval(){
    system.debug('datevalue==>'+datevalue);
    Date dtt = Date.parse(datevalue);
    system.debug('datevalue==>'+dtt);
}
}