JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select style="width: 100%">
    <option data-date="Mon May 25 2015 22:00:55 GMT+0300 (MSK)"  data-aviable="4" value="0" selected></option>
</select>

CSS

body {
    overflow: hidden;
}

JavaScript

function templateSelection (state) {
    if (!state.id) { return state.text; }
    console.log(state.element.getAttribute("data-date"));
    var $state = $(
        '<b>' + state.element.getAttribute("data-date") + '</b><span>, aviable: ' + state.element.getAttribute("data-aviable") + "</span>"
    );
    return $state;
};
function templateResult (state) {
    if (!state.id) { return state.text; }
    console.log(state.element.getAttribute("data-date"));
    var $state = $(
        '<b>' + state.element.getAttribute("data-date") + '</b><br><span>Aviable: ' + state.element.getAttribute("data-aviable") + "</span>"
    );
    return $state;
};

$('select').select2(
    {
        templateResult: templateResult,
        templateSelection: templateSelection
    });