Ajax and PHP

I would split the code into two

1. Your view that displays the page
2. Your model / controller that handles the logic of the data

Mixing them is just going to complicate things

Some notes on your JavaScript / jQuery

*Although it is legal it is not necessary to create different $(function blocks - you can put all your code in one.
*The following

$(document).ready(function () {

Select all Open in new window

Can be simplified to

$(function() {

Select all Open in new window

As you have it in your code blocks.
* Just a matter of preference but I put my script at the bottom of the page.
* $.ajax - .success is being deprecated - rather use promise functions .done()

Now, as to why your script is doing what it is doing.

Let's look at what is happening when you AJAX back

Code gets to line 2 and tests $_POST which is found to exist
Code tests POST variables - finds those
Code outputs result string
Code CONTINUES to LINE 11 - which is the rest of the page.
So what is sent back to the browser is the result string followed by the rest of the page.

This is one of the reasons why a separate script is a good idea.

In you script you could fix it by putting the following between line 8 and 9

die()

Select all Open in new window

But that is not a good idea.

Here is what the code would look like with a separate validation
HTML

<div id="result">Dates should Display here</div>
<form>
  <table style="margin: auto;">
    <tr>
          <div name="txtdepartdate">
                <td style="text-align:right">Depart Date:
        </td>
        <td>
                    <input type="text" id="txtdepartdate" name="txtdepartdate" class="datepicker" />
              </td>
          </div>  
          <div name="txtreturndate">
                <td style="text-align:right">Returning Date:
        </td>
        <td>
                   <input type="text" id="txtreturndate" name="txtreturndate" class="datepicker" />
              </td>
          </div>  
        </tr>
    </table>
  <br>
    <table style="margin: auto;">  
        <tr>
              <td style="text-align:center" colspan="4"><input type="submit" id="search" name="search" />
        </td>
    </tr>
  </table>        
</form>
</div>

Select all Open in new window

jQuery

<script>
$(function() {
    $("#search").click(function(e) {
        e.preventDefault();
        $.ajax ({
            url: 't2202.validate.php',
            type: 'POST',
            data:{
                'txtdepartdate' : $('#txtdepartdate').val(),
                'txtreturndate' : $('#txtreturndate').val()
            }
    }).done(function(data, status){
      $('#result').html(data)
        });
    });
  
  $('input.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    showButtonPanel: true,
    buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
    buttonImageOnly: true,
    dateFormat: 'mm-dd-yy'
  });
});
</script>

Select all Open in new window

PHP

<?php
$begdate = isset($_POST['txtdepartdate']) ? $_POST['txtdepartdate'] : 'No Departure Date passed through<br>';
$enddate = isset($_POST['txtreturndate']) ? $_POST['txtreturndate'] : 'No Return Date passed through<br>';

$result = 'Departure Date:' . $begdate  . '  Return Date: ' . $enddate; 

echo $result;

Select all Open in new window

Working sample here