JSFiddle - React, Tailwind, and code Playground

by thewrush

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pickadate@3.5.6/lib/themes/default.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pickadate@3.5.6/lib/themes/default.date.css">
<script src="https://cdn.jsdelivr.net/npm/pickadate@3.5.6/lib/compressed/picker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pickadate@3.5.6/lib/compressed/picker.date.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>

JavaScript

$('#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();
    });
});