Question 36675 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Need current month and upcoming months only in month dropdown – Jquery

I have created a custom datepicker of month and year only . I need to get current month and upcoming months and have to hide previous months.For example current month is september than options must include sept,oct,nov,dec.

$(document).ready(function() {
  $('select.month').change(function() {
    var date = new Date();
    var year = date.getFullYear();
    console.log(year);
    $('select.month option')[0].innerText = $('select option:selected').val();
    $('select.month option')[0].innerHTML = $('select option:selected').val();
    $("select.month").val($('select option:selected').val());

    //console.log("99"+$('select.month option:selected').val());
    var sd = $('select.month option:selected').val() + "-01";
    var ed = moment(sd).clone().endOf('month').format('MM-DD');
    var date = new Date();
    var year = date.getFullYear();

    //$("#year").attr=("value",year);
    var aha = document.getElementById('year');
    aha.innerText = year;
    var startOfMonth = (year + "-" + sd);
    var endOfMonth = (year + "-" + ed);
    console.log(startOfMonth);
    console.log(endOfMonth);
  });



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<select class="month" placeholder="Month">
  <option name="" value="" style="display:none;">MM</option>
  <option name="January" id="01" value="01">January</option>
  <option name="February" id="02" value="02">February</option>
  <option name="March" id="03" value="03">March</option>
  <option name="April" id="04" value="04">April</option>
  <option name="May" id="05" value="05">May</option>
  <option name="June" id="06" value="06">June</option>
  <option name="July" id="07" value="07">July</option>
  <option name="August" id="08" value="08">August</option>
  <option name="September" id="09" value="09">September</option>
  <option name="October" id="10" value="10">October</option>
  <option name="November" id="11" value="11">November</option>
  <option name="December" id="12" value="12">December</option>
</select>
<select>
  <option id="year"></option>
</select>
Tags:

2

Answers


  1. 0

    This is simple without moment

    Also you do not have ID and NAME on options

    $(function() {
  $('#month')
    .html(function() {
      return [this.options[0]].concat([...this.options].slice(new Date().getMonth() + 1))
    })
    .on("change", function() {
      const month = this.value;
      if (!month) return;
      const year = new Date().getFullYear();
      $("#year option").text(year)
      const start = new Date(year, month - 1, 1, 15, 0, 0, 0).toISOString().split("T")[0];
      const end = new Date(year, month, 0, 15, 0, 0, 0).toISOString().split("T")[0];
      console.log(start, end);
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="month" placeholder="Month">
  <option value="" style="display:none;">MM</option>
  <option value="01">January</option>
  <option value="02">February</option>
  <option value="03">March</option>
  <option value="04">April</option>
  <option value="05">May</option>
  <option value="06">June</option>
  <option value="07">July</option>
  <option value="08">August</option>
  <option value="09">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
<select id="year">
  <option></option>
</select>
    Login or Signup to reply.
  2. 0 
    var today = moment().format('YYYY-MM-DD');
var month = moment().format('M');
var day   =  moment().format('D');
var year  = moment().format('YYYY');

$('.month').val(month);
$('.month option:lt(' + month + ')').prop('disabled', true);
$('#year').text(year);
$('#year').val(year);

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<select class="month" placeholder="Month">
  <option name="" value="" style="display:none;">MM</option>
  <option name="January" id="1" value="1">January</option>
  <option name="February" id="2" value="2">February</option>
  <option name="March" id="3" value="3">March</option>
  <option name="April" id="4" value="4">April</option>
  <option name="May" id="5" value="5">May</option>
  <option name="June" id="6" value="6">June</option>
  <option name="July" id="7" value="7">July</option>
  <option name="August" id="8" value="8">August</option>
  <option name="September" id="9" value="9">September</option>
  <option name="October" id="10" value="10">October</option>
  <option name="November" id="11" value="11">November</option>
  <option name="December" id="12" value="12">December</option>
</select>
<select>
  <option id="year"></option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search