Semantic Calendar Widget

HTML

<script src="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
<link rel="stylesheet" href="//cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/217c3a03/dist/calendar.min.css">
<script src="//cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/217c3a03/dist/calendar.min.js"></script>
<div class="ui stackable menu">

    <div class="header item"><h1><i class="truck icon"></i> Shipping Log</h1></div>
 
    <div class="right menu">
        <div class="item">
            <div class="ui calendar ymd">
                <div class="ui input left icon">
                    <i class="calendar icon"></i>
                    <input type="text" name="start" placeholder="Date">
                </div>
            </div>
        </div>
    </div> 
  
</div>

<table class="ui celled table">
  <thead>
    <tr>
      <th>Date Added</th>
      <th>Ship Date Est.</th>
      <th>Ship Date Act.</th>
      <th>Cust No.</th>
      <th>Ship To.</th>
      <th>Doc No.</th>
      <th>Pick Status</th>
      <th>Hold</th>
      <th>Picker</th>
      <th>Tracking</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
        <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>
</div>

JavaScript

$('.ymd').calendar({
      monthFirst: false,
      type: 'date',
      today: 'true',
      formatter: {
        date: function (date, settings) {
          if (!date) return '';
           return date.toLocaleString('fr-FR', {year: 'numeric', month: '2-digit', day: '2-digit'}).replace(/(\d+)\/(\d+)\/(\d+)/, '$1/$2/$3');
        }
      }
    });