how to get all month of year? - javascript

As of new to javascript i am trying to get all month of a year from Jan-2014 to dec-2014 in listbox if year change to next year like 2015 then automatically a listbox to have change like january-2015 to december-2015..so how to build this in selection box???
<script>
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month)
<script>
<select name="month"></select>

Try this:
<select id="year">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<select id="month">
</select>
var months = new Array('Jan', 'Feb');
$('#year').change(function() {
var optionString = "";
for(var i=0; i< months.length; i++) {
optionString+= "<option>" + months[i] + $('#year').val() + "</option>";
}
alert(optionString);
$('#month').html(optionString);
});
DEMO
If you want to add year as per current date, you can do this:
var currentTime = new Date()
var year = currentTime.getFullYear()
and in for loop replace like this:
for(var i=0; i< months.length; i++) {
optionString+= "<option>" + months[i] + year + "</option>";
}

Related

Adding days to date jquery or JS

I have a select to add days from an input on 'dd/mm/yy' format to show the result in another input, I tried to do this but this is not working.
<input type="text" id="startdate" value="15/11/17">
<select name="Select1" id="days">
<option value="1">1 day</option>
<option value="2">2 days</option>
<option value="3">3 days</option>
</select>
<input type="text" id="fdate" value="">
$( "#days" ).change(function() {
var sta = $('#startdate').val()
var sel = parseInt($(this).val())
$('#fdate').val(sta+sel )
});
Use setDate to add the days
Demo
$("#days").change(function() {
var staItems = $('#startdate').val().split("/");
var date = new Date( Number(staItems[2]), Number(staItems[1])-1, Number(staItems[0]) );
date.setDate( date.getDate() + parseInt($(this).val()) );
$('#fdate').val( date.getDate() + "/" + (date.getMonth() + 1 ) + "/" + date.getYear() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="startdate" value="15/11/17">
<select name="Select1" id="days">
<option value="0">0 day</option>
<option value="1">1 day</option>
<option value="2">2 days</option>
<option value="3">3 days</option>
<option value="6">6 days</option>
<option value="7">7 days</option>
<option value="8">8 days</option>
</select>
<input type="text" id="fdate" value="">
Try this...
$( "#days" ).change(function() {
var dates = $('#startdate').val();
dates = dates.split('/');
var someDate = new Date(dates[1] +"/" + dates[0] + "/"+dates[2]);
var numberOfDaysToAdd = parseInt($(this).val());
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth() + 1;
var y = someDate.getFullYear();
var someFormattedDate = dd + '/'+ mm + '/'+ y;
$('#fdate').val(someFormattedDate);
});
Problems:
your start date is not parsed to a date so you can't do any operation on it
Then you are adding a string to a integer representing your days to add: '15/11/17' + 3. This is not going to work
Solution:
I highly suggest you give a look at momentJS
$('#days').change(function() {
var sta = moment($('#startdate').val(), "MM-DD-YY");
var sel = parseInt($(this).val());
$('#fdate').val(sta.add(sel, 'days'));
});
The input "#startdate" has text type, if you sum an "integer" the result it's not your target.
You need use a type date in the first input, convert his value to Date object and add a number of day with the correct function.
Here you have more info about Date object's.
You should use Date object of javascript
$( "#days" ).change(function() {
var sta = $('#startdate').val().split('/');
// Note that JS treats date as mm/dd/yy
var date = new Date([sta[1], sta[0], sta[2]].join('/'));
var sel = parseInt($(this).val());
date = new Date(date.getTime() + 60*60*24*sel);
$('#fdate').val(date.getDaty() + '/' + date.getMonth() + '/' + date.getYear());
});
Also please consider to change year displaying to full year because of same reasons Date.getYear deprecated
Pure js approach
split date , get day,
split selected value, get integer
add above two
create date again using the updated date
update it in the input box
document.getElementById("days").onchange = function() {
let inputValueParts = document.getElementById("startdate").value.split("/");
let daysToIncrement = document.getElementById("days").value.split(" ")[0];
let integerDate = parseInt(inputValueParts[1]);
let integerIncrement = parseInt(daysToIncrement);
integerDate += integerIncrement;
let increasedDate = inputValueParts[0] + "/" + integerDate + "/" +inputValueParts[2];
document.getElementById("fdate").value = increasedDate;
}

form input select returned as number, not string, with javascript

I have one html form which contain about 5 select inputs. Each input has as a value a number. When selection is made, i want to return the value as number, and not as a string. Example below:
<p>Cop <select name="c_palat" id="c_palat">
<option value=0>0</option>
<option value=30>1</option>
<option value=60>2</option>
</select></p>
<p>Adult <select name="a_palat" id="a_palat">
<option value=45>1</option>
<option value=90>2</option>
<option value=135>3</option>
</select></p></div>
<script>
var c_palat = document.getElementById("c_palat");
var c_pal = c_palat.options[c_palat.selectedIndex].value;
var a_palat = document.getElementById("a_palat");
var a_pal = a_palat.options[a_palat.selectedIndex].value;
var x =c_pal + a_pal
document.getElementById("result").innerHTML = x;
</script>
So, for a selection of option 1 from first input, (value 0), and option 1 from second input (value 45), the result is 045(string), not 45(number).
Thank you for any help provided. Have a nice day.
Try using Number
This convert the string into a number.
<script>
var c_palat = document.getElementById("c_palat");
var c_pal = Number(c_palat.options[c_palat.selectedIndex].value);
var a_palat = document.getElementById("a_palat");
var a_pal = Number(a_palat.options[a_palat.selectedIndex].value);
var x =c_pal + a_pal
document.getElementById("result").innerHTML = x;
</script>
You can parse value as integer.
var a = parseInt("10") + "<br>";
var b = parseInt("10.00") + "<br>";
var c = parseInt("10.33") + "<br>";
var d = parseInt("34 45 66") + "<br>";
var e = parseInt(" 60 ") + "<br>";
var f = parseInt("40 years") + "<br>";
var g = parseInt("He was 40") + "<br>";
var h = parseInt("10", 10)+ "<br>";
var i = parseInt("010")+ "<br>";
var j = parseInt("10", 8)+ "<br>";
var k = parseInt("0x10")+ "<br>";
var l = parseInt("10", 16)+ "<br>";
var n = a + b + c + d + e + f + g + "<br>" + h + i + j + k +l;
Output :
10 10 10 34 60 40 NaN 10 10 8 16 16
Source.
You could to with parseFloat().It convert string to number.And get the selected value with direct method c_palat.value instead of options[c_palat.selectedIndex]
var c_palat = document.getElementById("c_palat");
var c_pal = parseFloat(c_palat.value);
var a_palat = document.getElementById("a_palat");
var a_pal = parseFloat(a_palat.value);
var x = c_pal + a_pal
console.log(x)
//document.getElementById("result").innerHTML = x;
<p>Cop <select name="c_palat" id="c_palat">
<option value=0>0</option>
<option value=30>1</option>
<option value=60>2</option>
</select></p>
<p>Adult <select name="a_palat" id="a_palat">
<option value=45>1</option>
<option value=90>2</option>
<option value=135>3</option>
</select></p>
You can use ~~(double-bitwise not) to convert string to integers only
var c_palat = ~~(document.getElementById("c_palat").value);
var a_palat = ~~(document.getElementById("a_palat").value);
var x = c_palat + a_palat;
console.log(x);
<p>Cop <select name="c_palat" id="c_palat">
<option value=0>0</option>
<option value=30>1</option>
<option value=60>2</option>
</select></p>
<p>Adult <select name="a_palat" id="a_palat">
<option value=45>1</option>
<option value=90>2</option>
<option value=135>3</option>
</select></p>

Loop through years in a dropdown

I would like to display the current year and 10 years before that year.
Is it any way to do that through JavaScript or jQuery?
Currently, I am manually inputting values.
HTML:
<span>Year:</span>
<select name="year">
<option value="2014">2014</option>
<option value="2013">2013</option>
And so on....
</select>
I know how to get the current year in JavaScript
Here's what I have currently
var d = new Date();
var y = d.getFullYear();
$(function() {
var start_year = new Date().getFullYear();
for (var i = start_year; i > start_year - 10; i--) {
$('select').append('<option value="' + i + '">' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Year:</span>
<select name="year"></select>
But a templating engine like mustache.js would be better suited for that job, so you can avoid having markup code in your javascript.
html
<select name="example" id="select" ></select>
Javascript version
(function(){
var start_year = new Date().getFullYear();
var html ='';
for (var i = start_year; i > start_year - 10; i--) {
html += '<option value="'+i+'">'+i+'</option>';
}
document.getElementById("select").innerHTML = html;
})()
Jquery version
$(function() {
var start_year = new Date().getFullYear();
var html = ''
for (var i = start_year; i > start_year - 10; i--) {
html += '<option value="'+i+'">'+i+'</option>';
}
$("#select").html(html)
});

angular js input date on firefox

I've got these inputs and this model:
<input name="date" type="date" ng-model="model.date" />
<input name="time" type="time" ng-model="model.time" />
model{
date: "yyyy-mm-dd",
time: "hh24:mi"
}
I need the date and the time as a string and that format is ok for what I have to do. The problem is the input date and input time only work properly with Chrome. If I use Firefox these inputs become two simple input text.
What can I do?
As mentioned in W3Schools, the HTML5 input date is not supported in Firefox. Therefore, all input date will become simple input text in Firefox, as well as IE.
So if you only use IE and Firefox, you could use a jQuery datepicker. Use this for your timepicker.
Also, another way but not as nice, is using <select> tags.
Below I used JS (no jQuery) and HTML to create the datepicker and timepicker. Also, I have also created a "Validate" button to validate the values of the date, which means that "31 Feb 2012" and "29 Feb 2014" will be considered invalid.
HTML:
<table><tr><td>Event Date: </td><td> <select id="startday"></select><select id="startmonth">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select> <select id="startyear"></select></td></tr>
<tr><td>Event Time:</td><td> <select id="starthrs"></select><select id="startmins"></select> [24 hrs clock]</td></tr>
</table><br><br>
<input type="button" id="validate" value="Validate"> <a style="color: Red;" id="error"></a>
JS:
for(var i = 0; i < 24; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("starthrs").innerHTML += ("<option value='" + i + "'>" + s + " </option>");
}
for(var i = 0; i < 60; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("startmins").innerHTML += ("<option value='" + i + "'>" + s + " </option>");
}
for(var i = 1; i < 32; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("startday").innerHTML += ("<option value='" + s + "'>" + i + " </option>");
}
for(var i = new Date().getFullYear(); i < (new Date().getFullYear() + 11); i++) {
document.getElementById("startyear").innerHTML += ("<option value='" + i + "'>" + i + " </option>");
}
function ddlValue(id) {
var e = document.getElementById(id);
var strUser = e.options[e.selectedIndex].value;
return strUser;
}
// Validate date
function isDate(ExpiryDate) { // MM/DD/YYYY format
var objDate, // date object initialized from the ExpiryDate string
mSeconds, // ExpiryDate in milliseconds
day, // day
month, // month
year; // year
// date length should be 10 characters (no more no less)
if (ExpiryDate.length !== 10) {
return false;
}
// third and sixth character should be '/'
if (ExpiryDate.substring(2, 3) !== '/' || ExpiryDate.substring(5, 6) !== '/') {
return false;
}
// extract month, day and year from the ExpiryDate (expected format is mm/dd/yyyy)
// subtraction will cast variables to integer implicitly (needed
// for !== comparing)
month = ExpiryDate.substring(0, 2) - 1; // because months in JS start from 0
day = ExpiryDate.substring(3, 5) - 0;
year = ExpiryDate.substring(6, 10) - 0;
// test year range
if (year < 1000 || year > 3000) {
return false;
}
// convert ExpiryDate to milliseconds
mSeconds = (new Date(year, month, day)).getTime();
// initialize Date() object from calculated milliseconds
objDate = new Date();
objDate.setTime(mSeconds);
// compare input date and parts from Date() object
// if difference exists then date isn't valid
if (objDate.getFullYear() !== year ||
objDate.getMonth() !== month ||
objDate.getDate() !== day) {
return false;
}
// otherwise return true
return true;
}
document.getElementById("validate").onclick = function() {
var startday = parseInt(ddlValue("startday"));
var startmonth = parseInt(ddlValue("startmonth"));
var startyear = parseInt(ddlValue("startyear"));
var starthrs = parseInt(ddlValue("starthrs"));
var startmins = parseInt(ddlValue("startmins"));
// Invalid date
if(!isDate(ddlValue("startmonth") + "/" + ddlValue("startday") + "/" + ddlValue("startyear"))) {
document.getElementById("error").innerHTML = "Invalid date";
return;
}
document.getElementById("error").innerHTML = "";
}
Fiddle. Hope that helped.
AFAIK, 'date' input type is supported only by chrome at the moment. May be this answer will help with your need.

how to make options based on the current year

I want to have options of this year and next year, but I can't figure out how to integrate the JavaScript variable into the value = "" and the text inside the option tags. This code demonstrates what I mean (obviously it is not valid, but shows what I mean). so today the first option would be 2013 and the next, 2014. Thanks.
var date = new Date(),
y = date.getFullYear();
<html>
<select id = "year">
<option value = "y" >y</option>
<option value = "(y + 1)">(y + 1)</option>
</select>
</html>
With jQuery:
var sel = $("#year"),
date = new Date(),
y = date.getFullYear(),
newOptions = "";
newOptions += "<option value='" + y + "'>" + y + "</option>";
newOptions += "<option value='" + (y + 1) + "'>" + (y + 1) + "</option>";
sel.append(newOptions);
DEMO: http://jsfiddle.net/YxqcT/
Since you mentioned that you're using jQuery, you can use this:
var currentYear = (new Date).getFullYear();
var opts;
$('#year').append(function () {
for (var i = currentYear; i <= currentYear + 1; i++) {
opts += "<option value='" + i + "'>" + i + "</option>";
}
return opts;
})
jsFiddle example
No need for jQuery. Simple HTML DOM can do the work for you.
Sample >> http://jsfiddle.net/47dDu/
<!DOCTYPE html>
<html>
<body>
<select id="MySelectBox">
<option value="1" id="this_year"></option>
<option value="2" id="next_year"></option>
</select>
<script type="text/javascript">
var d = new Date();
var x = document.getElementById("this_year");
x.innerHTML=d.getFullYear(); //get this year
var y = document.getElementById("next_year");
y.innerHTML=d.getFullYear()+1; //get next year
</script>
</body>
</html>

Categories