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 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>
CodePudding user response:
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 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>
CodePudding user response:
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>