我有一个开始日期,由用户通过jquery日期选择器放在文本框中 我还有一个结束日期文本框,当用户更改开始日期的值时,我想用开始日期值填充。
所以我考虑做一个JavaScript而不是当文本框改变后输入值到结束日期文本框但我不知道如何做到这一点。
感谢各位帮忙,因为我不熟悉JavaScript。
答案 0 :(得分:2)
以下是您所询问的工作代码。
<!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>
正在使用JSFiddle (Here)
答案 1 :(得分:1)
如果是this calendar,(从your own "answer"看起来如此),你可以做这样的事情。当“date from”被选中时,它将设置“ date end ”并为其弹出日历:
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();
});
};
如果您不想弹出calendar-end,请删除:
cal_end.showCalendar();
根据您的陈述“[...]通过问题文本中的jquery日期选择器[...]”的原始答案。
jQuery UI变体:
使用onSelect
事件。
$(function() {
$("#date_start").datepicker({
onSelect: function(d) {
$("#date_end").val(d);
}
});
$("#date_end").datepicker();
});
您还可以在元素上添加更改事件,但不确定用户友好程度。
答案 2 :(得分:0)
这只是下面的简单方法,但如果您需要其他内容,请告诉我
function copytextbox()
{
document.getElementById('textbox2').value=document.getElementById('textbox1').value;
return false;
}
答案 3 :(得分:0)
<script>
function myfunction()
{
document.getElementById("text2").value=document.getElementById("text1").value;
}
</script>
和您的开始日期文本框 -
<input type="text" name="startdate" id="text1" onchange="myfunction()"/>
<input type="text" name="enddate" id="text2" />