Datepicker date format change isn't working

I have the following code for a date range datepicker:

<script>
$( function() {
var dateFormat = "dd/mm/yy",
from = $( "#DatePaid" )
.datepicker({
defaultDate: "-1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#DatePaidTo" ).datepicker({
defaultDate: "",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}

return date;
}
} );
</script>

<input id="DatePaid" name="DatePaid" type="text" value="" class="formTextfield_Medium" autocomplete="off" />
<input id="DatePaidTo" name="DatePaidTo" type="text" value="" class="formTextfield_Medium" autocomplete="off" />

However the date is still displaying in the format mm/dd/yy instead of dd/mm/yy. Can you see what I've done wrong?

You set a variable with the format, but you never pass it to the datepicker. You would have to add it to the datepicker definitions like:

.datepicker({
  dateFormat: dateFormat,
  defaultDate: ...

Thanks Ray. I've changed it as follows and now the dates display correctly, however when I search it comes up with zero results even though there are definitely matching records:

<script>
$( function() {
var dateFormat = "dd/mm/yy",
from = $( "#DatePaid" )
.datepicker({
dateFormat: "dd/mm/yy",
defaultDate: "-1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#DatePaidTo" ).datepicker({
dateFormat: "dd/mm/yy",
defaultDate: "",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}

return date;
}
} );
</script>

That has to do with the server side code that filters the result. I couldn't debug that with the datepicker code alone. If you attach the page I might be able to spot it.

Copy of page attached, thanks!

You are using an "=" comparison for the start date filter. It should be ">=" like:

$searchWADAProc_Fee_DB_WADbSearch1->setSearch(array("type"=>"Edit", "comparison"=>">=", "join"=>"AND"), array("DatePaid"), "t", "DatePaid");

I got the search comparison bit sorted, but it will only work when I set the date format to mm/dd/yy - when I change it to dd/mm/yy it gives me zero results. I've attached an updated copy of the page if you wouldn't mind having a look!

PHP understands slashes with dates as US format and dashes uses UK format. So it should either be: mm/dd/yy or dd-mm-yy

I've changed the format to dd-mm-yy and it all works fine, many thanks!