Datepicker custom select

jQuery UI Datepicker custom select - (month and year only) - (year only) - (year only, no controls)

by Constantin Popescu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="container">

  <h2 class="font-weight-light text-lg-left mt-4 mb-0"><b>jQuery UI Datepicker</b> custom select</h2>

  <hr class="mt-2 mb-3">
  <div class="row text-lg-left">
    <div class="col-12">

      <form>

        <div class="form-label-group">
        <label for="datepicker1">(month and year only : <code>id="datepicker1"</code> )</label>
          <input type="text" class="form-control" id="datepicker1" 
                 placeholder="(month and year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker2">(year only : <code>input id="datepicker2"</code> )</label>
          <input type="text" class="form-control" id="datepicker2" 
                 placeholder="(year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker3">(year only, no controls : <code>input id="datepicker3"</code> )</label>
          <input type="text" class="form-control" id="datepicker3" 
                 placeholder="(year only, no controls)" />
        </div>

      </form>

    </div>
  </div>

</div>

JavaScript

// *** (month and year only) ***
$(function() { 
  $('#datepicker1').datepicker( {
    yearRange: "c-100:c",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('MM yy (M y) (mm/y)', new Date(year, month, 1)));
    }
  }).focus(function () {
    /*$(".ui-datepicker-month").hide();*/
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    /*$(".ui-datepicker-close").hide();*/
    /*$(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();*/
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------





// *** (year only) ***
$(function() { 
  $('#datepicker2').datepicker( {
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate("yy", new Date(year, 0, 1)));
    },
    beforeShow: function(input, inst){
      if ($(this).val()!=''){
        var tmpyear = $(this).val();
        $(this).datepicker('option','defaultDate',new Date(tmpyear, 0, 1));
      }
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    /*$(".ui-datepicker-close").hide();*/
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
 ...