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

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

Related

datapicker automatic selection plus 1- 7 days from selected date

How to set auto select +7 days. User set first value e.g. 22.02.2022 and datapicker marks 01.03.2022 it means that endDate must be startDate +7
$('input[name="daterange"]').daterangepicker(
{
dateFormat: "MMMM D, YYYY",
timePicker: true,
startDate: moment(),
endDate: moment().startOf("days").add(7, "days"),
opens: "left",
applyButtonClasses: "Search",
},
var startDate = $("#datarange").data("daterangepicker").startDate._d;
var startDate_iso = startDate.toISOString();
if (
startDate_iso.substring(0, 10) == new Date().toISOString().substring(0, 10)
) {
//[wyl] dateCurrent = new Date();
//[wyl] interval_do = dateCurrent.toISOString();
var startDate = $("#datarange").data("daterangepicker").startDate._d;
var startDate_iso = startDate.toISOString();
var endDate = $("#datarange").data("daterangepicker").endDate._d;
var endDate_iso = endDate.toISOString();
interval = startDate_iso + "/" + endDate_iso;
console.log("A new date was set: " + startDate_iso + " to " + endDate_iso);
}
else {
var startDate = $("#datarange").data("daterangepicker").startDate._d;
var startDate_iso = startDate.toISOString();
var endDate = $("#datarange").data("daterangepicker").endDate._d;
var endDate_iso = endDate.toISOString();
interval = startDate_iso + "/" + endDate_iso;
console.log("A new date was set: " + startDate_iso + " to " + endDate_iso);
console.log("==================== Select date ================");
}
I have tried min / max but this is not the expected solution. it just allows me to return a date from the default to +7 days.
Thank you very much for any help.

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>

How to assign a specific date to a textbox using jquery

I have a jQuery function that assigns today's date to a textbox when a radio button is clicked.
In the example below, when the radio button value is "I", the Date Inactive date is today. When the radio button value is "A", the Date Active date is also today.
I am trying to introduce another action: when the radio button value is "A" I want to make id DNE to be equal to "12-31" of the current year (so in this case, "12-31-2016").
Since I wasn't sure how to do that, I entered ??? as the value. Thanks for any help.
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + dd[1]?dd:"0"+dd[0]); // padding
};
$(document).ready(function(){
var d = new Date();
$(".Status").change(function () {
if ($(this).val() == "I")
$("#Date_Inactive").val(d.yyyymmdd());
if ($(this).val() == "A")
$("#Date_Accepted").val(d.yyyymmdd());
$("#DNE").val(???);
});
});
P.S: notice that you're missing an ( in
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + dd[1]?dd:"0"+dd[0]);
// Missing ( ^^^ HERE
Otherwise:
$("#DNE").val( d.yyyymmdd().substring(5, 10) );
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
$(function(){
var d = new Date();
$(".Status").change(function () {
if ($(this).val() == "I")
$("#Date_Inactive").val( d.yyyymmdd() );
if ($(this).val() == "A")
$("#Date_Accepted").val( d.yyyymmdd() );
$("#DNE").val( d.yyyymmdd().substring(5, 10) );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="dateRadio" value="I" class="Status">
<input type="radio" name="dateRadio" value="A" class="Status">
<br>
<input type="text" id="Date_Inactive"> inactive <br>
<input type="text" id="Date_Accepted"> accepted<br>
<input type="text" id="DNE">DNE
Or if you want to do it without the func - here you go:
$("#DNE").val('12-31-'+new Date().getFullYear());

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>

Navigating between weeks on jquery datepicker via external buttons

I am working on asp.net mvc. I am trying to show a datepicker in a web page, along with two buttons i.e. previous and next which are for navigating between weeks in datepicker. I am able to show datepicker and able to select total week dates based on user selected date, like
$('#txtSrchFrom').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
if (startDate.getMonth() == endDate.getMonth()) {
$('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + endDate.getDate() + ", " + startDate.getFullYear());
}
else {
$('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + getMonthName(endDate.getMonth()) + " " + endDate.getDate() + ", " + startDate.getFullYear());
}
selectCurrentWeek();
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek();
}
});
$('#txtSrchFrom .ui-datepicker-calendar tr').live('mousemove', function () { $(this).find('td a').addClass('ui-state-hover'); });
$('#txtSrchFrom .ui-datepicker-calendar tr').live('mouseleave', function () { $(this).find('td a').removeClass('ui-state-hover'); });
and here is my markup,
<input type="button" class="btn btn-info" value="<< Prev" />
<div class="input-group" style="width: 220px;">
<input type="text" class="form-control" id="txtSrchFrom" name="txtSrchFrom" readonly="readonly" placeholder="Search by From Date" />
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
<input type="button" class="btn btn-info" value="Next >>" onclick="return gotoNextweek();"/>
<br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
Suppose I am currently in 1st week, and when i click on next button i need to switch to next week and all dates in that week needs to be selected. and previous button needs to work in a similar way. I have tried it by setting the endDate + 7 days to datepicker like,
function gotoNextweek() {
var $picker = $("#txtSrchFrom");
var date = new Date($picker.datepicker('getDate'));
date.setDate(endDate.getDate() + 7);
return false;
}
but it doesn't works for me. Please guide me, how to achieve this.
If you just want to add 7 days to the current selected date use:
var new_date = $("#datepicker").datepicker( "getDate" );
new_date = new_date.setDate(new_date.getDate()+7);
new_date = new Date(new_date);
$( "#datepicker" ).datepicker( "setDate", new_date );
The date returned from $picker.datepicker('getDate') is already a date object, you can't pass it to new Date() once more
$('#next, #prev').on('click', function(e) {
var date = $('#datepicker').datepicker('getDate');
e.target.id == 'next' ? date.setDate(date.getDate()+7) : date.setDate(date.getDate()-7);
$('#datepicker').datepicker('setDate', date );
});
FIDDLE

Categories