I have a start date which is put in a textbox by the user trough a jquery date picker.
I also have an end date textbox which I want to fill with the start date value when the user changed the value of the start date.
So I was thinking of doing a JavaScript and than a when textbox has changed enter value into end date textbox but I don't know how this would be done.
Thank you guys for helping since I am new to JavaScript.
Here is the working code for what you have asked.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#fromdate").datepicker({
onSelect: function() {
$(this).change();
}
});
$("#fromdate").change(function (){
var val=$("#fromdate").val();
$("#todate").val(val);
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="fromdate" name="from">
<label for="to">to</label>
<input type="text" id="todate" name="to">
</body>
</html>
And working JSFiddle(Here)
If it is this calendar, (which it looks like from your own "answer"), you could do something like this. It will set "date end" and pop up calendar for it when "date from" is selected:
window.onload = function(){
var cal_start = new JsDatePick({
useMode:2,
target:"date_start",
dateFormat:"%m/%d/%Y"
});
var cal_end = new JsDatePick({
useMode:2,
target:"date_end",
dateFormat:"%m/%d/%Y"
});
cal_start.addOnSelectedDelegate(function(){
document.getElementById('date_end').value = cal_start.getSelectedDayFormatted();
cal_end.showCalendar();
});
};
If you do not want the calendar-end to pop up, remove:
cal_end.showCalendar();
Original answer as per your statement "[…] trough a jquery date picker […]" in question text.
jQuery UI variant:
Use onSelect event.
Simple demo:
$(function() {
$("#date_start").datepicker({
onSelect: function(d) {
$("#date_end").val(d);
}
});
$("#date_end").datepicker();
});
You could also add for change event on element, but not sure how user-friendly that would be.
This is just the simple method below,but if you need something other,let me know
function copytextbox()
{
document.getElementById('textbox2').value=document.getElementById('textbox1').value;
return false;
}
<script>
function myfunction()
{
document.getElementById("text2").value=document.getElementById("text1").value;
}
</script>
and your start date textbox-
<input type="text" name="startdate" id="text1" onchange="myfunction()"/>
<input type="text" name="enddate" id="text2" />
