Add custom yesterday button to Pickadate v3.5.6

$('#datepicker').pickadate({
    format: 'mm/dd/yyyy',
    selectYears: true,
    selectMonths: true,
    editable: true,
    max: true,
    container: '#pickadate-container'
});

$(function(){
    var $btn = $('.pickadate-trigger'),
    $input = $('#datepicker'),
    picker = $input.pickadate('picker');
    $("#pickadate-container").find('.picker__footer').prepend('<button class="picker__button--today" type="button" id="yesterdayBtn" aria-controls="datepicker">Yesterday</button>');
    
    $btn.on('click', function(e){
        // stop the click from bubbling
        e.preventDefault();                                
        // prevent the default click action                      
        e.stopPropagation();
        picker.render();
        picker.open();
    });
});

<div class="form-group">
  <label class="control-label" for="datepicker">Choose a date</label> 
  <div class="input-group">
    <input type="text" name="datepicker" id="datepicker" class="form-control" required>
    <span class="input-group-addon p-t-0 p-b-0 p-r-5 p-l-5">
       <a class="pickadate-trigger" href="#" title="Open Calendar"><span class="material-icons">event</span></a>
    </span>
  </div>
  <div id="pickadate-container"></div>
  <p class="help-block">
     Note: this date cannot be changed once it has been submitted.
  </p>
</div>

JS Fiddle

Question 1: How can I add a custom button to the picker footer labeled "Yesterday"? The render function is not preserving the code. I was looking at the example here Pickadate API Render but cannot figure out why the render is not working? Is it because I'm using the API and it re-renders the picker each time .open() is called?