[laimas]

Совместить?

Ну я откуда могу значит чего надо? Надо с датой текст, совмещайте, что-то иное, на здоровье. Спрашивалось как вывести дату - через атрибут title. А надо ли ее в горошек раскрасить, это уже не мне решать.

Если по уму, то курсы которые выводятся в боксе сразу должны отображать дату, а не два курса в две строки хрен знает какой за что.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.ratebox > * {
    display: block;
}

.ratebox .up {
    color: #0f0;
} 

.ratebox .down {
    color: #f00;
}

.ratehead {
    background-color: #0164C6;
    color: #fff;
}
.ratehead .up, .ratehead .down {
    color: #fff;
}
</style>
 
<div class="ratehead">
<span class="current"></span>
</div>

<div class="ratebox">
 <span class="current"></span>
 <span class="previous"></span>
</div>
 
<script>
//именно такое и получит Ajax
var data = {"current":{"date":"11.2.2018","value":58.17,"rate":1},"previous":{"date":"10.2.2018","value":57.67,"rate":1}};
 
//и вот тут данные этого объекта помещаются на свои места
    $(".current,.previous").each(function() {
        var a = $(this), b = this.className, c = a.parent().hasClass('ratebox'); 
        a.html((c ? '<b>'+data[b].date+'</b>' : '') + 
                    " <b>$ " + data[b].value + '</b> <b class=' + ['down','up'][data[b].rate] +'>' + ['▼','▲'][data[b].rate] +'</b>')
                    .attr("title", !c ? data[b].date : "")
    })
</script>