We Keep Coding

How to Add 30 days to 1st Datepicker, display it on the 2nd Datepicker. And Add 3 days to 2nd , display it on 3rd?

Am new to jQuery and JavaScript. So please help me solve my problem.
Am able to add days with two datepicker. But what i want is take days from 3 datepickers and display it on a 4th datepicker. I would like to know the solution for this!.
My code is :)
<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>
<p>Date:
<input id="follow_Date" type="text" />
</p>
<p>
<input type="button" onclick="getdate()" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>
<script>
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();
});
function getdate() {
var tt = document.getElementById('txtDate').value;
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 30);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
var rr = document.getElementById('follow_Date').value;
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);
newdateOne.setDate(newdateOne.getDate() + 3);
ar dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();
var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
}
</script>
</form>
What am doing here is, I take the Date from the First Datepicker and when I click on the button Fill Follow Date, 30 will be added to the current day and displayed in the second Datepicker, this i am able to do it.
Now i want to take the second Datepicker day and add 3 to it and display it on the third Datepicker, when i click the button Fill Follow DateOne. Am not able to do the second part. Please help me with your logic.
Sorry, if my logic is completely wrong:>

In your code on both button click you are calling the same function,add two separate functions for these button clicks.It will work fine.
Try this code
$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();
$('input[id="follow_Date_btn"]').on('click',function(){
var tt = document.getElementById('txtDate').value;
if(!tt==""){
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 30);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
} else {
alert("enter date");
}
});
$('input[id="follow_Date_One_btn"]').on('click',function(){
var rr = document.getElementById('follow_Date').value;
if(!rr==""){
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);
newdateOne.setDate(newdateOne.getDate() + 3);
var dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();
var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
} else {
alert("enter date");
}
});
});
.Highlighted a {
background-color: Red !important;
background-image: none !important;
color: White !important;
}
.block{
width:calc(100%/4 - 10px);
float:left;
margin-right:10px;
}
.block>input {
float: left;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<p>Date:
<input id="txtDate" type="text" />
</p>
<p>
<input type="button" id="follow_Date_btn" value="Fill Follow Date" />
</p>
<p>Date:
<input id="follow_Date" type="text" />
</p>
<p>
<input type="button" id="follow_Date_One_btn" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>

select date from datepicker after i want next year date in next field

from date selected by the datepicker in dd-mm--yy format after this i need next year date with -1 day..i.e From:29-07-2016 then To:28-07-2016 like this...please guyz help me..i m sharing my source code
$('#oldDate').on('change', function(e){
var oldDate = new Date(this.value);
$('.datepicker').datepicker({dateFormat:'dd-mm-yy'});
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate()-1);
oldDate.setFullYear(oldDate.getFullYear()+1);
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear()+"-"+(month)+"-"+(day);
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
<p class="left">
<label for="from">FROM:</label>
<input type="text" name="from" id="oldDate" class="datepicker"/>
</p>
<p class="pull-right">
<label for="to">TO:</label>
<input type="text" name="to" id="new">
</p>

To achieve expected result, use datepicker and then use on change function to make work
JS:
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", "0");
$('#oldDate').click(function() {
$('#oldDate').datepicker('setDate', new Date());
});
$('#oldDate').on('change', function(e) {
console.log(this.value)
var x = this.value;
var from = x.split("-");
var f = new Date(from[2], from[1] - 1, from[0]);
var oldDate = new Date(f);
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate() - 1);
oldDate.setFullYear(oldDate.getFullYear() + 1);
console.log(oldDate)
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = (day) + "-" + (month) + "-" + oldDate.getFullYear();
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
});
Codepen-http://codepen.io/nagasai/pen/XKBZmN

Check this :
<script type="text/javascript">
var dt = new Date('2016/12/10');
var month = dt.getMonth()+1;
var day = dt.getDate()-1;
var year = dt.getFullYear()+1;
alert(month + '-' + day + '-' + year);
</script>

displaying current date in a text box - javascript

I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks

You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()

Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })

This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >

<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful

<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>

html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo

<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm

If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>

how to set date to input field using another date input field?

I have two input fields fromDate and toDate(both are date).I am using datepicker for input field fromDate. toDate is readonly and is dependent on the fromDate.That is date of toDate is is 6+.For example,if fromDate is 11/30/2014 then toDate is 12/6/2014.
My jsp code is
<input type="text" class="form-control dpd1" id="fromDate" name="fromDate">
<span class="input-group-addon">To</span>
<input type="text" class="form-control dpd2" id="toDate" name="toDate" readonly/>
and js code is:$('.dpd1').datepicker();
Thanks

You can do this with jQuery and change(). In change, You can get the value of fromDate and with Date object create new value for the toDate input.
$(function() {
$('#fromDate').change(function() {
var fromDateValue = $(this).val();
var toDateValue = new Date();
// some operations
$('#toDate').val(yourToDate);
});
})
You can add 6 days with this:
var today = new Date();
var todayplus6days= new Date(today);
todayplus6days.setDate(today.getDate()+6);
UPDATE:
jsFiddle: http://jsfiddle.net/8dx0sLey/1/
$(function() {
$('#fromDate').change(function() {
var fromDateValue = $(this).val();
var toDateValue = new Date(fromDateValue);
toDateValue.setDate(toDateValue.getDate()+6);
var sDate = toDateValue.getFullYear() + '-' + (toDateValue.getMonth()+1) + '-' + toDateValue.getDate();
$('#toDate').val(sDate);
});
})

I think you're looking for this.
$("#from").datepicker({
onClose: function (selectedDate, instance) {
if (selectedDate != '') { //added this to fix the issue
$("#to").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setDate(date.getDate() + 6);
console.log(selectedDate, date);
$("#to").datepicker("option", "minDate", date);
}
}
});

I tried using input type date:
http://jsfiddle.net/washington_guedes/dafbz0qo/
$(document).ready(function(){
$("#fromDate").on("blur", function(){
var year = parseInt( $(this).val().substring(0,4) );
var month = parseInt( $(this).val().substring(5,7) );
var day = parseInt( $(this).val().substring(9,11) );
month += 6;
if( month > 12){
month %= 12;
year++;
}
$("#toDate").val(year + "-" +
((month<10)?"0":"") +
month + "-" +
((day<10)?"0":"") + day);
});
});

Code:
$('#fromDate').datepicker();
$('#fromDate').change(function(){
var toDate = new Date($(this).val());
toDate.setDate(toDate.getDate()+6);
month = toDate.getMonth()+ 1;
year = toDate.getFullYear();
$('#toDate').val(month+'/'+toDate.getDate()+'/'+year );
});
Demo

Input Type Date validation 18 years old below

I'm having trouble with validation of input type="date". It shouldn't accept 18 years old below. Could you please help me? Thank you.
I google and search the forum I haven't found the answer.
I tried to validate it in the next page using PHP but my professor told me I must validate it in the same page. Like onchange it must be validated.
<input type="date" name="bday" id="bday" value="">

In case you are allowed to use HTML5, it is pretty simple. You can simply use the max attribute:
<input id="bday" type="date" max="1995-12-31" required="" />
In case you have to do it dynamic you can create the max attribute dynamically.
I made an example:
http://jsfiddle.net/trixta/wpb54/
http://jsfiddle.net/trixta/wpb54/4/

make use of javascript. If you want to accept birthdate of only 18 years and above then try following javascript code.
put onblur="return dobcheck()" in bday tag.
<script type="text/javascript">
function dobcheck()
{
var birth = document.getElementById('bday')
if(birth != "")
{
var record=document.getElementById('bday').value.trim();
var currentdate=new Date();
var day1 = currentdate3.getDate();
var month1 = currentdate3.getMonth();
month1++;
var year11 = currentdate3.getFullYear()-17;
var year2= currentdate3.getFullYear()-100;
var record_day1=record.split("/");
var sum=record_day1[1]+'/'+record_day1[0]+'/'+record_day1[2];
var current= month1+'/'+day1+'/'+year11;
var current1= month1+'/'+day1+'/'+year2;
var d1=new Date(current)
var d2=new Date(current1)
var record1 = new Date(sum);
if(record1 > d1)
{
alert("Sorry ! Minors need parential guidance to use this website");
document.getElementById('bday').blur();
document.getElementById('bday').value="";
document.getElementById('bday').focus();
return false;
}
}
}
</script>
i hope that now you will get it...

I know it's too late :D But may be, it would help others :)
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;// jan=0; feb=1 .......
var day = dtToday.getDate();
var year = dtToday.getFullYear() - 18;
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var minDate = year + '-' + month + '-' + day;
var maxDate = year + '-' + month + '-' + day;
$('#dob').attr('max', maxDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="dob">

<?php
$year=(int)date("Y");
$year-=18;
$year=(String)$year;
$year=$year.'-'.date("m").'-'.date("d");
echo "<input type='date' id='dob' name='dob'
max='$year' required>";
?>