如何通过一个日期时间选择器填充两个文本框
how to fill two textbox via one datetimepicker
我有两个日期时间类型的 Texbox,我想用一个 Datetimepicker 填充它们。我的意思是第一个文本框是开始日期,第二个文本框是项目的结束日期,每个项目的默认期限是 30 天。当我 select 3/24/2015 通过日期时间选择器第一个文本框应该是 3/24/2015 并且第二个文本框自动应该是 4/24/2015 。我该怎么做?
这是我的代码:
<input type="text" onclick="displayDatePicker('start', this, 'ymd')">
您在找这样的东西吗?
$(function() {
$.datepicker.setDefaults($.datepicker.regional['en']);
$('#startdate').datepicker({
onSelect: function(selectedDate) {
var date = $(this).datepicker('getDate');
$('#endDate').datepicker('option', 'minDate', date); // Reset minimum date
date.setDate(date.getDate() + 30); // Add 7 days
$("#enddate").datepicker("setDate", date); // Set as default
}
});
$('#enddate').datepicker({
onSelect: function(selectedDate) {
$('#startdate').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date
}
});
});
实例:
$(function() {
$.datepicker.setDefaults($.datepicker.regional['en']);
$('#startdate').datepicker({onSelect: function(selectedDate) {
var date = $(this).datepicker('getDate');
$('#endDate').datepicker('option', 'minDate', date); // Reset minimum date
date.setDate(date.getDate() + 30); // Add 7 days
$("#enddate").datepicker( "setDate", date); // Set as default
}});
$('#enddate').datepicker({onSelect: function(selectedDate) {
$('#startdate').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date
}});
});
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
<input type="text" id="startdate" />
<input type="text" id="enddate" />
我有两个日期时间类型的 Texbox,我想用一个 Datetimepicker 填充它们。我的意思是第一个文本框是开始日期,第二个文本框是项目的结束日期,每个项目的默认期限是 30 天。当我 select 3/24/2015 通过日期时间选择器第一个文本框应该是 3/24/2015 并且第二个文本框自动应该是 4/24/2015 。我该怎么做?
这是我的代码:
<input type="text" onclick="displayDatePicker('start', this, 'ymd')">
您在找这样的东西吗?
$(function() {
$.datepicker.setDefaults($.datepicker.regional['en']);
$('#startdate').datepicker({
onSelect: function(selectedDate) {
var date = $(this).datepicker('getDate');
$('#endDate').datepicker('option', 'minDate', date); // Reset minimum date
date.setDate(date.getDate() + 30); // Add 7 days
$("#enddate").datepicker("setDate", date); // Set as default
}
});
$('#enddate').datepicker({
onSelect: function(selectedDate) {
$('#startdate').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date
}
});
});
实例:
$(function() {
$.datepicker.setDefaults($.datepicker.regional['en']);
$('#startdate').datepicker({onSelect: function(selectedDate) {
var date = $(this).datepicker('getDate');
$('#endDate').datepicker('option', 'minDate', date); // Reset minimum date
date.setDate(date.getDate() + 30); // Add 7 days
$("#enddate").datepicker( "setDate", date); // Set as default
}});
$('#enddate').datepicker({onSelect: function(selectedDate) {
$('#startdate').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date
}});
});
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
<input type="text" id="startdate" />
<input type="text" id="enddate" />