j查询日期选择器，自定义填充所选日期

Question

我做了一个有3个输入的脚本：

-开始日期

-输入类型编号(添加天数(

-结果日期(开始日期和添加天数的总和(

我必须分别显示日期，而不是开始日期的日，月和年，但是当结果日期输入更新时，我没有得到它。

$(function() {
$("#numNights").on('change', function() {
$('#LastDate,#BeginDate').val('');
$('.dateDetails span').html('');
daysAdded = this.daysAdded.val();
});
$("#BeginDate").datepicker({
dateFormat: 'mm/dd/yy',
changeMonth: true,
minDate: new Date(),
maxDate: '+1Y',
onSelect: function(value, date) {
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
//Populate the selected date on other elements this works fine
$('#arrDate span.month').html(months[date.selectedMonth]);
$('#arrDate span.day').html(date.selectedDay);
$('#arrDate span.year').html(date.selectedYear);
},
onClose: function(selected) {
var daysAdded = parseInt($('#numNights').val());
var dateDefaults = new Date(selected);
dateDefaults.setDate(dateDefaults.getDate() + daysAdded);
var dd = dateDefaults.getDate();
var mm = dateDefaults.getMonth() + 1;
var y = dateDefaults.getFullYear();
var dtFormatted = mm + '/' + dd + '/' + y;

//LastDate input fills with the result of beginDate+added days
$('#LastDate').val(dtFormatted);

//Set date to LastDate input datepicker with out open or display behavior
//Try to Populate the result date in other elements (like BeginDate) but doesn't works
$(function() {
$('#LastDate').datepicker({
disabled: true,
setDate: dtFormatted,
onSelect: function(value, date) {
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
$('#depDate span.month').html(months[date.selectedMonth]);
$('#depDate span.day').html(date.selectedDay);
$('#depDate span.year').html(date.selectedYear);

}
});

});

}

});

});

我在jsfiddle链接中分享我的代码：https://jsfiddle.net/alonsoct/8f63dyco/

感谢您的帮助！

Answer 1

试试这个...更改 $("#numNights"( 更改函数((

$("#numNights").on('change', function() {
$('#LastDate').val('');
var beginDate= new Date($('#BeginDate').val());
daysAdded = parseInt($('#numNights').val());
beginDate.setDate(beginDate.getDate() + daysAdded);
var dd = beginDate.getDate();
var mm = beginDate.getMonth() + 1;
var y = beginDate.getFullYear();
var dtFormatted = mm + '/' + dd + '/' + y;
$('#LastDate').val(dtFormatted);
});

Answer 2

我用一个"按钮"得到了它，可以对日期选择器进行"隐藏调用"，并运行"onClose"行为来显示分离的元素。

$('#depDate label').click(function() {
$("#LastDate").datepicker("show");
$("#LastDate").datepicker("hide");
$('#ui-datepicker-div').css('visibility', 'hidden');
});

如果您需要查看分辨率，请转到我的小提琴的最新版本

https://jsfiddle.net/alonsoct/8f63dyco/

感谢您@Sooriya的帮助和贡献！