我的网站上有五个字段。一个是日期的jquery datepicker检查,第二个是结账日期。接下来的两个是"总共晚上"字段(即计算日期字段之间的总天数)和第4个字段是下拉菜单"费率"提供所选房间的每晚房价。我的脚本(下面)通过乘以"总晚数"中的数字来计算正确的TOTAL。领域"率"字段,在TOTAL价格字段(这是我的第5个字段)中给出答案,但我遇到了问题。
当我返回并将结帐日期更改为更晚的日期时,'总共晚上'字段相应地更新,但我的TOTAL输入字段没有预算,除非我在下拉菜单中更改选择,否则它保持不变。是否有任何方法可以使结帐日期(jquery datepicker)字段的更改重置" rate"字段或正确更新总字段?
这是我的代码,为TOTAL价格(总晚数*费率)提供正确的计算。
//Now let's calculat the total price
$('#publishForm').bind('keypress keydown keyup change',function(){
var value = $('input[name=totaldays]').attr("value");
value2 = $('#select option:selected').attr("title");
total_suite = parseInt(value2);
total_days = parseInt(value);
var total = '';
total = total_suite * total_days;
/* output */
$(".pTotal").replaceWith('<span class="pTotal">' + total + '</span>');
$(".pTotal").formatCurrency();
$("#price").replaceWith('<input type="hidden" id="price" value="' + total +'" name="price" style="border:none;font-size:14px;margin-top:10px;" readonly="readonly" />');
});
});
如果需要,这是我的datepicker脚本(下面链接)。由于另一个stackoverflow用户的帮助,我昨晚得到了它的工作。不确定它是否相关,但无论如何都想包含它。
编辑:这是一个脚本,它可以完成我所有的datepicker魔法,并相应地更新总夜晚字段。
// Calendar Dates
/* create an array of days which need to be disabled */
var disabledDays = ["11-13-2012","11-14-2012","11-15-2012","11-29-2012","11-30-2012"];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
//Block the Weekends
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
function days() {
var a = $("#datepicker_start").datepicker('getDate').getTime(),
b = $("#datepicker_end").datepicker('getDate').getTime(),
c = 24*60*60*1000,
diffDays = Math.round(Math.abs((a - b)/(c)));
$("#totaldays").val(diffDays)
}
$(document).ready(function () {
$.datepicker.setDefaults({dateFormat: 'mm/dd/yy',minDate: +1,changeMonth: true,changeYear: true,numberOfMonths: 2,constrainInput:true,beforeShowDay:nationalDays,});
var selector = function (dateStr) {
var d1 = $('#datepicker_start').datepicker('getDate');
var d2 = $('#datepicker_end').datepicker('getDate');
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#totaldays').val(diff);
}
$('#datepicker_start').datepicker({
onSelect: function(selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {minDate.setDate(minDate.getDate() + 3);}//min days requires
$('#datepicker_end').datepicker('option', 'minDate', minDate || 1); // Date + 1 or tomorrow by default
days();
}});
$('#datepicker_end').datepicker({minDate: 1, onSelect: function(selectedDate) {
var maxDate = $(this).datepicker('getDate');
if (maxDate) {maxDate.setDate(maxDate.getDate() - 1);}
$('#datepicker_start').datepicker('option', 'maxDate', maxDate); // Date - 1
days();
}});
$('#datepicker_start,#datepicker_end').change(selector)
});