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;
}
Related
function check(){
var d = new Date();
var date = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var state = document.form1.state.value;
if(state==1){
document.getElementById("expDate").innerHTML = (date + 4) + "/" + month + "/" + year;
}
else if(state==2){
document.getElementById("expDate").innerHTML = (date + 7) + "/" + month + "/" + year;
}
}
<form name="form1" >
<table width="20%">
<tr>
<td>Select State: </td>
<td>
<select name="state">
<option value=1>CANSAS</option>
<option value=2>NEW YORK</option>
</select>
</td>
</tr>
<tr>
<td>Expected Delivered:</td>
<td><p id="expDate"></p>
</td>
</tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="submit" onClick="return check()">
</td>
</tr>
</table>
</form>
I'm creating a postage calculator using HTML and JavaScript. The calculator will calculate the expected delivery date when users select the state option and submit. After the submit, the selected value will be caught by JavaScript and used as to recognize which area of the state is (south, west, else). Eg: cansas, which is west, duration will be 5 days. Then in the same page the expected delivery date will be shown after it calculate by adding the 5 with current date.
You are almost there. Your code actually sets the innerHTML for 'extDate' as well but after that it submits the form and value disappears as form resets.
Only thing that you have to do is to prevent the form to be submitted by returning false.
function check(e) {
// e.preventDefault();
var d = new Date();
var date = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
// document.getElementById("date").innerHTML = date + "/" + month + "/" + year;
var state = document.form1.state.value;
if (state == 1) {
document.getElementById("expDate").innerHTML = (date + 4) + "/" + month + "/" + year;
}
else if (state == 2) {
document.getElementById("expDate").innerHTML = (date + 7) + "/" + month + "/" + year;
}
return false;
}
I have checked the following the code and for 'New York', it returns Expected Delivered:
26/10/2018
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)
});
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.
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>";
}
I have a html form like this :
<form action="https://www.123.com/cgi-bin/action" method="post">
<input type="hidden" name="item_name" value="Product Name">
<input type="hidden" name="item_number" value="Product Name_2010_12_21_15_03">
<input type="hidden" name="amount" value="29.99">
</form>
How to use javascript to replace the above "Product Name_2010_12_21_15_03" with dynamically generated time string ?
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write("Product Name+" + year + "_" + month + "_" + day)
//-->
</script>
You can just set the value of the input:
<input id='product_date_time' type='hidden' name='item_number' value=''>
<script>
document.getElementById('product_date_time').value = new Date().toString();
</script>
The script does not have to immediately follow the input field, of course. It simply has to run at some point after the input element has been added to the DOM.
If you need more control over the format, you might want to look into the venerable Date.js library.
Based on your comment for the format "2010_12_21_15_03":
<input id='product_date_time' type='hidden' name='item_number' value=''>
<script>
function myDate () {
var d = new Date();
return d.getFullYear() + "_" + (d.getMonth() + 1) + "_" + d.getDate() + "_" + d.getHours() + "_" + d.getMinutes();
}
document.getElementById('product_date_time').value = myDate();
</script>
Ok, I got it :
<form action="https://www.123.com/cgi-bin/action" method="post" name="My_Form">
<input type="hidden" name="item_name" value="Product_Name">
<input type="hidden" name="item_number" value="Product_Name">
<input type="hidden" name="amount" value="9.99">
<script type="text/javascript">
<!--
function getCorrectedYear(year)
{
year=year-0;
if (year<70) return (2000+year);
if (year<1900) return (1900+year);
return year;
}
var today=new Date();
var minute=today.getMinutes();
if(minute<10) minute='0'+minute;
var hour=today.getHours();
if(hour<10) hour='0'+hour;
var day=today.getDate();
if(day<10) day='0'+day;
var month=today.getMonth()+1;
if(month<10) month='0'+month;
var year=getCorrectedYear(today.getYear());
var dateString=year+'_'+month+'_'+day+'_'+hour+'_'+minute;
document.My_Form.item_number.value=document.My_Form.item_name.value+'_'+dateString;
//-->
</script>
</form>