当我浏览这个实现的代码时,我不明白代码实际上做了什么？我无法弄清楚逻辑的编写方式.
我还浏览了关于函数’beforeShowDay’和’onSelect’的Datepicker小部件的jQuery UI API文档,但是也找不到线索,所以请求帮助让我以更简单和描述的方式理解下面的代码.
有人可以用简单明了的语言让我理解“afterShowDay”和“onSelect”中函数的用法吗？
<div class="col-md-2 voffset2 rightpad">
<div class="col-sm-3">
<div id="datepicker"></div>
</div>
</div>
Javascript代码：
<script type="application/javascript">
$(document).ready(function() {
/******* Display Calender and events highlighted *******/
/*Not understood what does below array variable has role to play */
var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31"]');
$( "#datepicker" ).datepicker({
beforeShowDay: function(date) {
var dateObj = new Date(date);
var month = dateObj.getMonth() + 1;
if(month < 10) {
month = "0"+month;
}
var day = dateObj.getDate();
if(day < 10) {
day = "0"+day;
}
var year = dateObj.getFullYear();
thisdate = year + "-" + month + "-" + day;
if($.inArray(thisdate,myDates) != -1) {
return [true,'eventDateCls',''];
} else {
return [true,'',''];
}
},onSelect: function(dateText,inst) {
var dateAsString = dateText;
console.log(dateAsString);
url = "http://localhost/CKWEB_28-12-2015/ajax_event.PHP";
$.ajax({
url: url,type: "POST",data: {event_date:dateAsString},beforeSend: function() {
$('#loader-icon').show();
},complete: function() {
$('#loader-icon').hide();
},success: function(data) {
$("#eventListing").html(data);
$('#loader-icon').hide();
},error: function(){}
});
}
});
/******* Display Calender and events highlighted *******/
});
</script>
解决方法
名为beforeShowDay的函数用于在满足特定条件时向每个datepicker单元格添加特定的CSS类.在您的情况下,此条件是“如果单元格的确切日期等于之前在myDates中定义的事件日期之一”.
让我为你解析代码：
第1部分
var myDates = $.parseJSON('["1969-12-31","1969-12-31"]');
这是定义myDates变量并为其分配值的部分.该值显然是一个模型值,因为从1901年1月1日开始的任何jQuery.ui datepicker日期都无法满足1969-12-31.您可以通过四种方法将此值更改为实际事件日期：
>通过执行AJAX调用动态设置它,并在调用$(selector).datepicker(options)函数之前将$.parseJSON(returnedJSON)分配给myDates.
>通过使用任何服务器端脚本(<？PHP echo json_encode($eventDatesArray);？>如果PHP)将JSON字符串嵌入到#datepicker自身的data-anyname属性中,然后使用JavaScript从中读取它来动态设置它通过在调用$(selector).datepicker(options)函数之前将$.parseJSON($(this).data(‘anyname’))分配给myDates来该元素.
>在< script>中动态添加它如果< script>使用服务器端脚本有内联代码,而不是外部文件的链接.
>替换现有脚本中的当前日期.
第2部分
var dateObj = new Date(date);
var month = dateObj.getMonth() + 1;
if(month < 10) {
month = "0"+month;
}
var day = dateObj.getDate();
if(day < 10) {
day = "0"+day;
}
var year = dateObj.getFullYear();
thisdate = year + "-" + month + "-" + day;
这是开发人员获取datepicker单元格完整日期的部分,并将其作为具有所需格式的字符串分配给thisdate.仅使用thisdate = $.datepicker.formatDate(“yy-mm-dd”,new Date(date));虽然这本来是一个更容易的方法.
第3部分
if($.inArray(thisdate,myDates) != -1) {
return [true,''];
} else {
return [true,''];
}
这是在先前定义的日期内搜索此日期的部分.这里,eventDateCls是用于突出显示事件日期单元格的类名.如果单元格的日期是事件日期之一,则单元格将具有名为eventDateCls的类,并将突出显示.同样,更好的方法可能只使用return [true,(myDates.indexOf(thisdate)< 0)？ ''：'eventDateCls','']; ONSELECT 至于onSelect,它只是一个事件触发的回调函数,它接收所选日期作为文本并将其发布到某些http：//localhost/CKWEB_28-12-2015/ajax_event.PHP,无论它是什么.我们无法确切知道它究竟做了什么,但这是一个PHP文件,可能用于验证和保存(插入到数据库中)所选的日期信息.我们唯一知道的是,它应该返回(echo)一些字符串,它可以通过$(“#eventListing”).html(data)调用直接插入到DOM中.
