Explode function on post title.

I am trying to create an engagements list for our band with the soonest gigs at the top.

once the date has passed the top post would disappear. i am using the post title to show the date of the gig and the venu split by using a delimiter, in this case I am using the vertical line ” | “. I would have a post title such as ” 15.06.2015 | Old Trafford”

To then split this once it is on the page I want to use the explode function but am having problems. here is the code I have so far for testing,

<?php
$posts = get_posts('numberposts=15&order=DESC&orderby=post_time&category_name=Engagement');

if (empty($posts)) {
echo "<div><div class=news-post><span class=news-title>We have no Engagments booked...</span></div></div>" ;
} else {

 foreach ($posts as $post) : setup_postdata( $post ); 

 $ingress = the_title();
 $postex = explode("|", $ingress );
 $date = "$postex[0]";
 $venue = "$postex[1]";
 echo "<br>date = $date <br>";
 echo "venue = $venue<br>";

 ?>

 <?php echo "title = "; the_title()?>
 <?php echo "<br><br>";

 ?>

<?php
endforeach;
}

?>

This is not working. It all seems to stem from using the “the_title()” variable. If I print this directly it shows the post title but i cant put it into the explode function. if i actually declare a post title as a variable eg $ingress = "15.06.15 | Old Trafford"; the explode function works perfectly and i can then use the two outputs as i need.

you can see the above code working HERE

Look at the bottom of the main page, it should split the date and venue variables out but it isnt.

Im quite inexperienced with PHP so its probably incorrect syntax. if anyone can help it would be very much appreciated. Cheers