Jquery DateRangePicker

modify jquery DateRangePicker to multi purpose picker

by game5413

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css">
<select id="date_changer">
  <option value="" selected>Choose</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
  <option value="yearly">yearly</option>
  <option value="range">range</option>
</select>
<br>
<br>
<input type="text" name="date">

CSS

.yearly table.table-condensed .monthselect,
.yearly table.table-condensed thead tr:nth-child(2),
.yearly table.table-condensed tbody,
.monthly table.table-condensed thead tr:nth-child(2),
.monthly table.table-condensed tbody {
  display: none;
}

.daterangepicker.monthly .drp-calendar,
.daterangepicker.yearly .drp-calendar {
  width: 1000px !important;
}

.yearly table.table-condensed .yearselect {
  width: 100%;
}

JavaScript

var datepicker = $('input[name="date"]');
var pickerConfig = function(period) {
  var config = {};
  switch (period) {
    case "daily":
      config = {
        showDropdowns: true,
        singleDatePicker: true,
        autoUpdateInput: true,
        locale: {
          format: "DD MMMM YYYY",
          cancelLabel: 'Clear'
        }
      };
      break;
    case "monthly":
      config = {
        showDropdowns: true,
        singleDatePicker: true,
        autoUpdateInput: true,
        locale: {
          format: "MMMM YYYY",
          cancelLabel: 'Clear'
        }
      };
      break;
    case "yearly":
      config = {
        showDropdowns: true,
        singleDatePicker: true,
        autoUpdateInput: true,
        locale: {
          format: "YYYY",
          cancelLabel: 'Clear'
        }
      };
      break;
    case "range":
      config = {
        showDropdowns: true,
        autoUpdateInput: true,
        locale: {
          format: "DD MMMM YYYY",
          cancelLabel: 'Clear'
        }
      };
      break;
    default:
      config = null;
      break;
  }
  return config;
};
var pickerEvent = function(picker, period) {
  switch (period) {
    case "monthly":
    case "yearly":
      picker.element.on('hide.daterangepicker', function(ev, instance) {
        /*
         * i selected the third row because there was month
         * that date 1 on second row, so i feel to keep it save
         * with choosing the third row
         */
        var td = $(instance.container).find('.table-condensed tbody tr:nth-child(3) td:first-child');
        /*
         * the setTimeout have on purpose to delay calling trigger
         * event when choosing date on third row, if you not provide
         * the timeout, it will throw error maximum callstack
         */
        setTimeout(function() {
          /*
           * on the newer version to pick some date was changed into event
           * mousedown
           */
          td.trigger('mousedown');
 ...