我正试图根据PHPAbbers的免费脚本编写预订，但在用户选择日期时无法输出价格。这是JavaScript代码：
/**
* @@@
* DateTimePicker / Available Calendar (version)
*/
'use strict';
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function($) {
var plugin_name = 'calendar',
data_key = 'plugin_' + plugin_name,
defaults = {
modifier: 'datetimepicker', // wrapper class
day_name: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], // 0-6 = sunday -> saturday
day_first: 0,
month_name: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
paging: ['<i class="prev"></i>', '<i class="next"></i>'],
unavailable: [], // static data - to merge with dynamic data
adapter: null, // host to get json data of unavailable date
month: null, // month of calendar = month in js + 1, month in js = 0-11
year: null, // year of calendar
num_next_month: 0, // number of next month to show
num_prev_month: 0, // number of prev month to show
num_of_week: 6, // number of week need to show on calendar number/auto
price: null,
onSelectDate: function(date, month, year){} // trigger on select
};
var Plugin = function(options){
var date = new Date();
this.options = options;
this.$element = $(options.element);
this.options.year = this.$element.data('year') || this.options.year || date.getFullYear();
this.options.month = this.$element.data('month') || this.options.month || date.getMonth() + 1;
this.options.month--;
//this.options.price = 0;
// for plugin
this.unavailable = []; // for check for unavailable dates
//this.price = 0;
this.init.call(this);
return this;
};
Plugin.prototype = {
init: function(){
var _this = this;
// re-sort day_name & create day_index
this.day_index = [];
this.options.day_name = this.options.day_name.slice(this.options.day_first).concat(this.options.day_name.slice(0, this.options.day_first));
for (var i = 0; i < this.options.day_name.length; i++){
this.day_index.push((this.options.day_first + i + 7) % 7);
}
this.update();
},
/**
* Update data, get json from adapter, generate search keywords & send to adapter
* @return {[type]} [description]
*/
update: function(){
var _this = this, months = this.getMonths();
// get data
if (typeof this.options.adapter === 'string'){
$.getJSON(this.options.adapter, {
keys: $(months).map(function(item){
// format search key from js to database store
return this.year + '-' + (this.month <= 8?'0':'') + (this.month + 1);
}).toArray()
}, function(data){
//console.log('update', data);
_this.unavailable = _this.options.unavailable.concat(data);
_this.draw(months);
});
}else{
this.unavailable = this.options.unavailable;
this.draw(months);
}
},
/**
* Draw months list to element
* @param {[type]} months array of {month: ..., year: ...} object
* @return {[type]} [description]
*/
draw: function(months){
this.$element.empty();
for (var i in months){
this.$element.append(this.getCalendar(months[i].month, months[i].year));
}
},
/**
* Get list of months need to show
* @return {[type]} [description]
*/
getMonths: function(){
var date = new Date(), result = [];
for (var i = this.options.month - this.options.num_prev_month; i <= this.options.month + this.options.num_next_month; i++){
date.setFullYear(this.options.year);
date.setMonth(i);
result.push({
month: date.getMonth(),
year: date.getFullYear()
});
}
return result;
},
/**
* Load previous month
* @return {[type]} [description]
*/
prevMonth: function(){
this.options.month--;
this.update();
},
/**
* Load next month
* @return {[type]} [description]
*/
nextMonth: function(){
this.options.month++;
this.update();
},
/**
* [getCalendar description]
* @param {[type]} month 0 - 11 (Jan - Dec)
* @param {[type]} year full year
* @return {[type]} dom element
*/
getCalendar: function(month, year){
var _this = this, date = new Date();
date.setFullYear(year);
date.setMonth(month);
date.setDate(1);
var day_first = date.getDay();
// total date
date.setMonth(date.getMonth() + 1);
date.setDate(0);
var total_date = date.getDate();
// begin date
var date_start = this.day_index.indexOf(day_first);
// total week need to show
var total_week;
if (!isNaN(this.options.num_of_week)){
total_week = 6;
}else{
total_week = Math.ceil((date_start + total_date)/7);
}
// draw
return $('<div>').addClass(this.options.modifier).append([
$('<div>').addClass('paging').append(function(){
return [
$('<span>').addClass('prev').append(_this.options.paging[0]).click(function(){
_this.prevMonth();
}),
$('<div>').addClass('month-name').append([_this.options.month_name[date.getMonth()], ', ', date.getFullYear()]),
$('<span>').addClass('next').append(_this.options.paging[1]).click(function(){
_this.nextMonth();
}),
];
}),
$('<table>').append(function(){
return [
$('<thead>').append(function(){
return $(_this.options.day_name).map(function(index, element){
return $('<td>').append(element);
}).toArray();
}),
$('<tbody>').append(function(){
var ap = [];
for (var i = 0; i < total_week; i++){
ap.push($('<tr>').append(function(){
var ap = [];
for (var j = 0; j < 7; j++){
var d = new Date();
d.setFullYear(year);
d.setMonth(month);
//console.log(month, year);
//d.setDate(1);
d.setDate(-date_start + (j + 1)+(i*7));
//var available = me.options.filter.call(me, d);
ap.push($('<td>').addClass(function(){
var cls = [];
if (_this.isAvailable(d.getDate(), d.getMonth() + 1, d.getFullYear())){
cls.push('available');
}else{
cls.push('unavailable');
}
if (d.getMonth() == date.getMonth()){
cls.push('cur-month');
}else{
cls.push('near-month');
}
return cls.join(' ');
}).data({date: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear()}).append(d.getDate()).click(function(){
var date = $(this).data('date'),
month = $(this).data('month'),
year = $(this).data('year');
_this.options.onSelectDate.call(_this, date, month, year);
}));
}
return ap;
}));
}
return ap;
})
];
})
]);
},
/**
* Check the date book: date, month, year have to in MySql format
* Base on this.unavailable data / input MySql date format (support glob)
* Eg: ['year-month-date', '*-month-date']
* @param {[type]} date [description]
* @param {[type]} month month in javascript = 0-11, month in MySql = 1-12, so month input have to +1 before run this function
* @param {[type]} year [description]
* @return {Boolean} [description]
*/
isAvailable: function(date, month, year){
for (var i in this.unavailable){
var book_date = this.unavailable[i].split('-');
if (book_date.length !== 3){
return false;
}else if (
(book_date[0] == '*' || book_date[0] - year === 0) &&
(book_date[1] == '*' || book_date[1] - month === 0) &&
(book_date[2] == '*' || book_date[2] - date === 0)
){
return false;
}
}
return true;
},
/**
* Get the price of the selected date
* @param {[type]} date [description]
* @param {[type]} month month in javascript = 0-11, month in MySql = 1-12, so month input have to +1 before run this function
* @param {[type]} year [description]
*/
getPrice: function(date, month, year) {
// get data
$.getJSON("assets/calendar/server/pricelist.php", {
keys: year + '-' + month + '-' + date
}, function(data){
//_this.unavailable = _this.options.unavailable.concat(data);
//_this.draw(months);
this.options.price = data;
//alert(data);
console.log('success 1', data);
return data;
});
}
};
$.fn[plugin_name] = function (options){
return this.each(function(){
var data = $(this).data(data_key);
if (!data){
$(this).data(data_key, new Plugin($.extend({
element: this
}, defaults, options)));
}
if (typeof options === 'string'){
$(this).data(data_key)[options].call(this);
}
});
};
}));
这是我的HTML:
<html>
<head></head>
<body>
<div class="col-xss-12 tab-pane active" id="all">
<div data-form-alert>
<div id="all-room-alert" class="data-form-alert-success" style="visibility: hidden">
<div id="all-room-alert-msg" class="alert alert-success text-center"></div>
</div>
</div>
<div id="show-next-month-all" data-toggle="calendar"></div>
</div>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<!--<script type="text/javascript" src="assets/calendar/scripts/jquery.min.js"></script>-->
<script type="text/javascript" src="assets/calendar/scripts/dateTimePicker.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#show-next-month-all').calendar(
{
num_next_month: 2,
num_prev_month: 0,
adapter: 'assets/calendar/server/adapter.php',
onSelectDate: function(date, month, year)
{
// alert([year, month, date].join('-') + ' is: ' + this.isAvailable(date, month, year));
document.getElementById("all-room-alert").style.visibility = "visible";
if(this.isAvailable(date, month, year)) {
var price = this.getPrice(date, month, year);
console.log('success', price);
// alert(this.price);
document.getElementById("all-room-alert-msg").className = "alert alert-success text-center";
document.getElementById("all-room-alert-msg").innerText = [year, month, date].join('-') + ' is available and the price is ' + price;
} else {
document.getElementById("all-room-alert-msg").className = "alert alert-danger text-center";
document.getElementById("all-room-alert-msg").innerText = [year, month, date].join('-') + ' is not available';
}
}
});
</script>
php文件：（仅用于测试）
echo(json_encode(array("IDR2,670,000")));
现在，我得到的错误是价格没有定义，但当我查看控制台时，数据就在那里，只是落后了。
当我试图通过控制台输出时，"success"没有定义，然后在这行下面，我从PHP文件中得到了"success1"和价格。
编辑：找到了如何做到这一点。在DatePicker.js中，我添加了一个名为getPrice（）的新函数，它接受了日期、月份、年份和alert-box-id参数。调用getJson完成后，它将把结果附加到警报框中。
您可以使用json_encode（（您的数组），1）来检查价格的值。