Datepicker jQuery - modify function and styling

Hi,

Looked through support and wider online resources but hitting a wall and in need of some assistance.

I have a WordPress site, with a Contact page.
Using Gravity forms for the Contact form.
I have two date pickers, essentially a 'start' and 'end'.
I want selection of 1st to be reflected in the 2nd - in that the end datepicker can display no dates earlier than the start date.

In a 'test' html page I have this working perfectly:
http://dev.twentyfourten.com/clients/daleygolfholidays/test.html

Code used is this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"  />
    <script type="text/javascript">
	jQuery.noConflict();
   jQuery(document).ready(function($) {
    $("#txtFromDate").datepicker({
        minDate: 0,
        maxDate: "+365D",
        numberOfMonths: 2,
		dateFormat: 'dd/mm/yy',
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });
    $("#txtToDate").datepicker({
        minDate: "+7D",
        maxDate:"+365D",
        numberOfMonths: 2,
		dateFormat: 'dd/mm/yy',
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });
});

</script>

However, when I try and work this code in to my WordPress Contact page I don't get the same results:
http://www.daleygolfholidays.co.uk/contact-us/

Here I am using the following code up in the wp-head section:

<script type="text/javascript">
	jQuery.noConflict();
   jQuery(document).ready(function($) {
    $("input_1_5").datepicker({
        minDate: 0,
        maxDate: "+365D",
        numberOfMonths: 2,
		dateFormat: 'dd/mm/yy',
        onSelect: function(selected) {
          $("input_1_6").datepicker("option","minDate", selected)
        }
    });
    $("input_1_6").datepicker({
        minDate: "+7D",
        maxDate:"+365D",
        numberOfMonths: 2,
		dateFormat: 'dd/mm/yy',
        onSelect: function(selected) {
           $("input_1_5").datepicker("option","maxDate", selected)
        }
    });
});

</script>

* Datepicker IDs are changed from test version to Gravity form inputs

And down in my footer after all other scripts I am using the following refs:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"  />

As you can see when viewing the page and using the datepickers, neither the function nor styling is as seen in the test page.

I've tried moving the script in the header down into the footer, the links in the footer up to being with the header script, no dice - the original Gravity form settings still seem to be 'in control'.

Would appreciate some help!

Cheers