how can I set date format in html which I get in Response as date object

Question

Here is My Html :-

<form method="post" id="form1" >
     <div  class="input-group input-medium date date-picker" data-date-format="D d M yyyy" data-date-start-date="+0d">
        <input name="bookingDate" class="form-control" readonly="" type="text">
        <span class="input-group-btn">
             <button class="btn default" type="button">
                  <i class="fa fa-calendar"></i>
             </button>
        </span>
     </div>
     <button type="button" name="Detailbtn1" class="btn green Detailsave">Save</button>
</form>
<div class="col-sm-8  border-left">
     <ul>
          <li class="bookingDate"></li>
     </ul>
</div>

Js :-

$('.Detailsave').click(function () {
    var thisClass = $(this);
    var FormData = $(this).closest('form').serializeArray();
    var result = {};
    $.each(FormData, function (i, field) {
        result[field.name] = field.value;
    });
    $.ajax({
        type: 'POST',
        url: Routing.generate('save_detail'),
        data: {'data': result},
        success: function (data) {
            $.each(data[0], function (key, value) {
                var className = document.getElementsByClassName(key);
                $(className).text(data[0][key]);
            });
        }
    });

});

Reponse like this :-

[{
    "Id":20,
    "bookingDate":{
                   "date":"2017-02-13 13:45:00.000000",
                   "timezone_type":3,
                   "timezone":"Asia\/Kolkata"
                  }
}]

I want to display date in (Mon 13th February 2017) 'D dS F Y' format.. so how can I change format of date object which I get response and set where found a class..