Inline Datepicker - cannot pass value

I have set up a datepicker and then embedded it in the page instead of as a popup - using the tutorial here http://www.webassist.com/tutorials/Datepicker-basic-modifications.

However I need to pass the value of the datepicker to the following page. I have searched the internet and see that if you add a hidden field inside the div that holds the datepicker and then use $('#datetimepicker').on('dp.change', function(event) { alert(event.date); }); I should be able to do it but it just wont pass the value. Everything else works.

Here is the code..
<form method="get" enctype="multipart/form-data" id="dateform" action="....">
<div class="col-12 pb-2" id="datepicker_1">
<label for="StartDate">Select Your Holiday Date</label>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div></form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$('#datepicker_1').datepicker({
dateFormat: 'yy-mm-dd',
showAnim: 'show',
minDate: '+0',
maxDate: '+2Y',
numberOfMonths: [1, 2],
onClose: closeDatePicker_datepicker_1
});
$('#datepicker_1').on('dp.change', function(event) {
//console.log(moment(event.date).format('MM/DD/YYYY h:mm a'));
//console.log(event.date.format('MM/DD/YYYY h:mm a'));
var formatted_date = event.date.format('MM/DD/YYYY h:mm a');
$('#my_hidden_input').val(formatted_date);
});
});
function closeDatePicker_datepicker_1() {
var tElm = $('#datepicker_1');
if (typeof datepicker_1_Spry != null && typeof datepicker_1_Spry != "undefined" && StartDate_Spry.validate) {
datepicker_1_Spry.validate();
}
tElm.blur();
}
</script>

I think it would be available on the next page as:

<?php echo($_GET["date"]); ?>

Yes I have that but it is just blank - that's the problem. When I submit the form the url is ...../booking-date.php?date=&adults=2

Can I get a url and FTP access to test with? I'll take a look and see what I can find.

I have private messaged it

You just have to add:
altField: "#my_hidden_input"

to your datepicker javascript constructor. I will look like:

$('#datepicker_1').datepicker({
		dateFormat: 'yy-mm-dd',
		showAnim: 'show',
		minDate: '+0',
		maxDate: '+2Y',
		numberOfMonths: [1, $nomonth],
		onClose: closeDatePicker_datepicker_1,
    altField: "#my_hidden_input"
	});

Brilliant - it works thanks!!!