JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="input-group date" style="width: 200px">Quarter:
  <input type="text" id="sel-quarter" class="form-control" style="cursor: pointer" />
  <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>
<br>
<div class="input-group date" style="width: 200px">Month:
  <input type="text" id="sel-month" class="form-control" style="cursor: pointer" />
  <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>
<br>
<div class="input-group date" style="width: 200px">Year:
  <input type="text" id="sel-year" class="form-control" style="cursor: pointer" />
  <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>
<br>
<div class="input-group date" style="width: 200px">Day:
  <input type="text" id="sel-day" class="form-control" style="cursor: pointer" />
  <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>

<div id="result">

</div>

CSS

body {
  margin: 10px;
}

.datepicker table tr td span {
  width: 100%;
}

#result{
  border:1px solid grey;
  padding:.5rem;
  margin:.5rem;
}

JavaScript

$.fn.datepicker.dates['qtrs'] = {
  days: ["Sunday", "Moonday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  daysShort: ["Sun", "Moon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  months: ["Q1", "Q2", "Q3", "Q4", "", "", "", "", "", "", "", ""],
  monthsShort: ["Jan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Feb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mar", "Apr&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;May&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jun", "Jul&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aug&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sep", "Oct&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nov&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dec", "", "", "", "", "", "", "", ""],
  today: "Today",
  clear: "Clear",
  format: "mm/dd/yyyy",
  titleFormat: "MM yyyy",
  /* Leverages same syntax as 'format' */
  weekStart: 0
};


var result = $('#result');

$('#sel-quarter').datepicker({
  format: "MM yyyy",
  minViewMode: 1,
  autoclose: true,
  language: "qtrs",
  forceParse: false
}).on("show", function(event) {

  $(".month").each(function(index, element) {
    if (index > 3) $(element).hide();
  });

});

$('#sel-month').datepicker({
  format: "dd-mm-yyyy",
  minViewMode: 1,
  maxViewMode: 1,
  autoclose: true,
  language: "nl",
  forceParse: false
}).on('changeDate', function(e) {

var ndate = e.date;

  var firstDay = new Date(ndate.getFullYear(), ndate.getMonth(), 1);
  var lastDay = new Date(ndate.getFullYear(), ndate.getMonth() + 1, 0);

  result.html(
    '<p>' + ndate + '</p>' +
    '<p>' + firstDay + '</p>' +
    '<p>' + lastDay + '</p>' 
  );

});

;
$('#sel-year').datepicker({
  format: "dd-mm-yyyy",
  minViewMode: 2,
  maxViewMode: 2,
  autoclose: true,
  language: "nl",
  forceParse: false
});
$('#sel-day').datepicker({
  format: "dd-mm-yyyy",
  minViewMode: 0,
  maxViewMode: 0,
  autoclose: true,
  language: "nl",
  forceParse: false
});