Product Name

This component uses default semantic styles, will be updated in upcoming releases.
See docs for calendar component Here

Date Picker

Show Code 
<div class="ui calendar">
  <div class="ui input left icon">
    <i class="calendar icon"></i>
    <input type="text" placeholder="Date/Time">
  </div>
</div>

<script type="text/javascript">
  $('.ui.calendar').calendar();
</script>

Calendar

Show Code 
<div class="ui calendar">
</div>

<script type="text/javascript">
  $('.ui.calendar').calendar();
</script>

Range Picker

Show Code 
<div class="ui form">
  <div class="two fields">
    <div class="field">
      <label>Start date</label>
      <div class="ui calendar" id="rangestart">
        <div class="ui input left icon">
          <i class="calendar icon"></i>
          <input type="text" placeholder="Start">
        </div>
      </div>
    </div>
    <div class="field">
      <label>End date</label>
      <div class="ui calendar" id="rangeend">
        <div class="ui input left icon">
          <i class="calendar icon"></i>
          <input type="text" placeholder="End">
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $('#rangestart').calendar({
      type: 'date',
      endCalendar: $('#rangeend')
    });
    $('#rangeend').calendar({
      type: 'date',
      startCalendar: $('#rangestart')
    });
</script>