nuBuilder Forum

Code: Select all

(function($) {
  $.fn.monthYearPicker = function(options) {
    
    var settings = $.extend({
      startYear: new Date().getFullYear() - 100, // default starting year is 100 years ago
      endYear: new Date().getFullYear(), // default ending year is the current year
      selectedYear: null, // default selected year is null
      selectedMonth: null, // default selected month is null
      onMonthYearSelected: function(year, month) {} // default callback function
    }, options);

    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    var currentYear = settings.selectedYear ? settings.selectedYear : settings.endYear;
    var currentMonth = settings.selectedMonth ? settings.selectedMonth : new Date().getMonth();

    var $container = $("<div class='month-year-picker-container'></div>");
    var $yearDropdown = $("<select class='year-dropdown'></select>");
    var $monthDropdown = $("<select class='month-dropdown'></select>");
    var $submitButton = $("<button>Submit</button>");

    for (var year = settings.startYear; year <= settings.endYear; year++) {
      $yearDropdown.append($("<option />").val(year).text(year));
    }

    for (var month = 0; month < 12; month++) {
      $monthDropdown.append($("<option />").val(month).text(monthNames[month]));
    }

    $yearDropdown.val(currentYear);
    $monthDropdown.val(currentMonth);

    $submitButton.on("click", function() {
      settings.onMonthYearSelected($yearDropdown.val(), $monthDropdown.val());
      $container.remove();
    });

    $container.append($yearDropdown).append($monthDropdown).append($submitButton);

    $(this).on("click", function() {
      $("body").append($container);
    });

    return this;
  };
})(jQuery);

Code: Select all

$(document).ready(function() {
  $("#my-input-element").monthYearPicker({
    startYear: 2000,
    endYear: 2025,
    selectedYear: 2021,
    selectedMonth: 4,
    onMonthYearSelected: function(year, month) {
      console.log("Selected year: " + year);
      console.log("Selected month: " + month);
    }
  });
});

Code: Select all

.month-year-picker-container {
  position: absolute;
  z-index: 9999;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.year-dropdown, .month-dropdown {
  font-size: 16px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
}