JQuery Syntax...

Access the data using the .data syntaxin jQuery.  Note that you will need to include jQuery in your page, if you have not already done so.

$('.day a').click(function() {
  alert("day is " + $(this).data('day'));
  alert("month is " + $(this).data('month'));
  alert("year is " + $(this).data('year'));
});

Select all Open in new window

First solution.You can assigne an id into separate element and work as follow:
HTML

<div class="day fri past">
<a data-day="10" data-month="3" data-year="2017" id="date_1" >10</a>
</div>
  <div class="day fri past">
<a data-day="20" data-month="31" data-year="2017" id="date_2" >10</a>
</div>
  <div class="day fri past">
<a data-day="12" data-month="3" data-year="2017" id="date_3">10</a>
</div>

Select all Open in new window

JQuery:

(function(){
var day=$('#date_1').data('day');
var month=$('#date_1').data('month');
var year=$('#date_1').data('year');
alert(day+'\n'+month+'\n'+year);
})();

Select all Open in new window

Second without setting ID attr:
HTML

<div class="day fri past">
<a data-day="10" data-month="3" data-year="2017"  >10</a>
</div>
  <div class="day fri past">
<a data-day="20" data-month="31" data-year="2017"  >10</a>
</div>
  <div class="day fri past">
<a data-day="12" data-month="3" data-year="2017" >10</a>
</div>

Select all Open in new window

JQuery:

($(function(){
var allAnchorElements=document.querySelectorAll('a');

for(var i=0;i<=allAnchorElements.length;i++){
  var dayi=allAnchorElements[i].dataset.day;
  var monthi=allAnchorElements[i].dataset.month;
  var yeari=allAnchorElements[i].dataset.year;
  alert(dayi+'\n'+monthi+'\n'+yeari);
}
}));

Select all Open in new window

Not to be snarky, but can you tell me why my answer was not accepted?  You specifically requested a jQuery solution, which is what I provided, as Julian pointed out.  It will help me to present better answers in the future if I know why.