I have defined month drop down list in view like this
<select id="dlMonth" onchange="OnChangeDownloadTimesheetOption('month')">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
and year drop down like this
<li style="float:left;margin-left:2%">#Html.DropDownListFor(m => m.SelectedYear, #Model.year, new { id = "dlYear", onchange = "OnChangeDownloadTimesheetOption('year')" })</li>
Now I want to disable all the months which has not yet occured for the current year in the javascript page.And for the previous years it must not disable any of the months.
I have written code somewhat like this in javascropt page
function TimesheetDownloadPageOnLoad() {
debugger;
var todayDate = new Date();
var year = todayDate.getFullYear();
var selectedYear=$("#dlYear").val();
if (selectedYear == year)
{
$("#dlMonth").attr('disabled','disabled')
}
Please help me with the coding.
To achieve this you can use getMonth() to get the current month as an integer from a Date object. You can then use jQuery's :gt() selector to get all months after that from the select, before disabling them using prop('disabled'). Try this:
function TimesheetDownloadPageOnLoad() {
var month = new Date().getMonth();
$('#dlMonth option:gt(' + month + ')').prop('disabled', true);
}
TimesheetDownloadPageOnLoad();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dlMonth">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
Related
I'm trying to make a small calculator which asks the user for their month and date of birth and gives them the astrology sign according to the values they selected. I'm just not quite sure how to combine the two values into one so I can assign it to a variable.
JS:
function getSelectValues() {
var selectedMonth = document.getElementById("month").value;
var selectedDate = document.getElementById("date").value;
return selectedMonth + selectedDate;
}
getSelectValues();
HTML:
<form id="birthday">
<select id="month">
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="date">
<option value=""></option>
<option value="1st">1</option>
<option value="2nd">2</option>
<option value="3rd">3</option>
<option value="4th">4</option>
<option value="5th">5</option>
<option value="6th">6</option>
<option value="7th">7</option>
<option value="8th">8</option>
<option value="9th">9</option>
<option value="10th">10</option>
<option value="11th">12</option>
<option value="12th">12</option>
<option value="13th">13</option>
<option value="14th">14</option>
<option value="15th">15</option>
<option value="16th">16</option>
<option value="17th">17</option>
<option value="18th">18</option>
<option value="19th">19</option>
<option value="20th">20</option>
<option value="21st">21</option>
<option value="22nd">22</option>
<option value="23rd">23</option>
<option value="24th">24</option>
<option value="25th">25</option>
<option value="26th">26</option>
<option value="27th">27</option>
<option value="28th">28</option>
<option value="29th">29</option>
<option value="30th">30</option>
<option value="31st">31</option>
</select>
<input type="submit" id="button" value="Go"></input>
This looks at the selectedIndex for the day/month values and then checks them against the Aries sign range as an example. Remember in JavaScript dates January is 0 not 1.
function getSelectValues() {
var selectedMonth = document.getElementById("month").selectedIndex - 1;
var selectedDate = document.getElementById("date").selectedIndex;
var d = new Date(0000, selectedMonth, selectedDate);
var ariesStr = new Date(0000, 2, 21)
var ariesEnd = new Date(0000, 3, 19)
console.log(ariesStr < d && d < ariesEnd)
}
<select id="month">
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="date">
<option value=""></option>
<option value="1st">1</option>
<option value="2nd">2</option>
<option value="3rd">3</option>
<option value="4th">4</option>
<option value="5th">5</option>
<option value="6th">6</option>
<option value="7th">7</option>
<option value="8th">8</option>
<option value="9th">9</option>
<option value="10th">10</option>
<option value="11th">12</option>
<option value="12th">12</option>
<option value="13th">13</option>
<option value="14th">14</option>
<option value="15th">15</option>
<option value="16th">16</option>
<option value="17th">17</option>
<option value="18th">18</option>
<option value="19th">19</option>
<option value="20th">20</option>
<option value="21st">21</option>
<option value="22nd">22</option>
<option value="23rd">23</option>
<option value="24th">24</option>
<option value="25th">25</option>
<option value="26th">26</option>
<option value="27th">27</option>
<option value="28th">28</option>
<option value="29th">29</option>
<option value="30th">30</option>
<option value="31st">31</option>
</select>
<input type="button" onclick="getSelectValues()" id="button" value="Go">
I don't know how you're planning to check which sign they are, but it might actually be easier to keep the month and day separate. Then a simple way to check signs would be like:
const months = {
mar : {
cutoff: 21,
oneSign: picses,
otherSign: aries
},
jul : {
cutoff: 23,
oneSign: cancer,
otherSign: leo
},
oct : {
cutoff: 22,
oneSign: scorpio,
otherSign: sagittarius
}
}
function getSign(month, day){
if(day < months[month][cutoff]){ return months[month][oneSign]; }
else { return months[month][otherSign]; }
}
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
I have the list of the month and they have numeric value to represent month number. I need to Mar to be selected by typing 3 on keyboard when it is focused.
Now I have to type "m" to select Mar or first letter of any month to select that month.
You can have a look at the fiddle here : https://jsfiddle.net/tn0gL34h/1/
check this i have modified ahmad's answer little bit, this will work for 2 digits also. source
var typingTimer;
var doneTypingInterval = 1000;
var $input = $('select');
var keys = '';
$input.on('keyup', function (e) {
keys += parseInt(e.key);
console.log(keys);
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
function doneTyping () {
if(keys != ''){
//do something
$input.val(parseInt(keys));
keys='';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
For months from January to September, the following code will work, because they all require a single keystroke.
For the others, Month 10, 11, and 12, you will have to select manually.
$('select').on('keyup',function(e){
// this will only work for Jan --> Sep
// becuase Oct --> Dec require two digits
$(this).val(parseInt(e.key));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
As far as I know, the only reliable way to do this would be to use a javacript select menu replacement plugin. The techniques for capturing keypresses while a select is focused work on some browsers but not others (see more discussion on this here: keydown event in drop down list). In fact, though others have mentioned it works for them, Ahmad's answer above does not work on my browser (Chrome 49 / OS X 10.8).
Here is an example of how you could do this with a modified matcher method using Select2:
$('select').select2({
matcher: function(params, data) {
if ($.trim(params.term) === '') {
return data;
} else if (data.id.indexOf(params.term) === 0) {
// this is where the magic happens
// we return options where search input matches
// the beginning of the value
return data;
} else {
return null;
}
}
});
select {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
is here some solutions how to count days between two select input only by day name of week with JavaScript? Or some demo in jsfiddle?
Example:
I Have two select tag inputs:
<select>
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<select>
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<input type="text" name="c_days">
If user select Friday in the first one and the Monday in the second one (its been result 3 days), should calculate the total number of days between the first and second select and put counted valuee into c_days input.
Thank for idea!
function updateResult() {
// Get selections.
var firstValue = parseInt(document.querySelector('#firstMenu').value);
var secondValue = parseInt(document.querySelector('#secondMenu').value);
// Calculate difference. If < 0, add 7 days.
var difference = secondValue - firstValue;
if (difference < 0) difference += 7;
// Add value to input
document.querySelector('#c_days').value = difference;
}
window.onload = function() {
// Append functions to drop down menus.
document.querySelector('#firstMenu').addEventListener('change', updateResult);
document.querySelector('#secondMenu').addEventListener('change', updateResult);
};
<select id="firstMenu">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<select id="secondMenu">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<input type="text" name="c_days" id="c_days" value="0">
Below I have a year dropdown.
<select name="from_year" class="col-md-4 form-control" id="from_year">
<option value="0">Select Year</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option selected="selected" value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
Now from ajax call I get some year say 2016. Now I want to disable all options less than 2016. I tried following:
$('select#from_year option:lt('+payment_date[1]+')').prop("disabled", true);
. . . where payment_date[1] = 2016, but to no avail.
Am I doing something wrong. Any help/suggestions are welcome.
You can use filter() to achieve this:
var year = 2016;
$('#from_year option').filter(function() {
return $(this).val() < year;
}).prop('disabled', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select name="from_year" class="col-md-4 form-control" id="from_year">
<option value="0">Select Year</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option selected="selected" value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
- Update -
Note that the syntax for the filter() function can now be simplified using ES6 arrow functions:
$('#from_year option').filter((i, el) => el.value < year).prop('disabled', true);
Rory's answer is great (I upvoted it :) ), but here is one that is more of an adaptation of what you initially tried:
var $group = $("select#from_year");
var iTarget = $group.find("[value='" + payment_date[1] + "']").index();
$group.find(":lt(" + iTarget + ")").prop("disabled", true);
The key difference is that jQuery's :lt() runs off of an elements index within its selector group, rather than its value. So you have to retrieve the index of the "2016" <option> before you can compare the other indexes to it with :lt().
Note: That would also disable the "Select Year" option which may or may not cause you issues.
I have 2 drop downs in HTML both representing months. So I want a validation like following.
If I select the first drop down month as April, then the next drop-down menu should start from the month April. If the first one is changed to June then the second should change to June.
<div id="head2" style="width:15%;float:right;margin-left:5px;">
<select id='gMonth2' onchange="show_month()">
<option value=''>--Select Month--</option>
<option selected value='1'>Janaury</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
<div id="head1" style="width:15%;float:right;margin-left:5px;">
<select id='gMonth1'>
<option value=''>--Select Month--</option>
<option selected value='1'>Janaury</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
</div>
The function will be:
function show_month()
{
//
}
How should I write that function?
Easy with jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#gMonth2').change(function(){
var month = $(this).val();
$('#gMonth1').val(month);
});
});
</script>
and skip the onChange event in the first select...
Working example here: http://jsfiddle.net/sCnEZ/1/
Your JS function could be like this:
function show_month(obj) {
document.getElementById('gMonth1').selectedIndex = obj.selectedIndex;
}
You should change onchange="show_month()" with onchange="show_month(this)"
Check out this jsfiddle