gpt4 book ai didi

jQuery Datepicker beforeShowDay 仅在第一次点击后才起作用

转载 作者:行者123 更新时间:2023-12-03 22:49:05 24 4
gpt4 key购买 nike

我在 beforeShowDay 方面遇到问题。

当我的页面加载时,我告诉要突出显示的日子不会突出显示,直到我单击日历中的某一天。此外,如果我单击下个月按钮并返回到原始月份,那么“所选”日期将按预期突出显示。

因此,只有在日历的初始绘制时,日期才会像我编程的那样突出显示。日历中的任何点击都会自行修复。

我缺少 init 选项吗?请参阅下面我的代码示例。我的测试网址位于 protected 目录中,其用户/通行证为 test/test。查看右栏底部的迷你校准。切换到下个月再回来看看我的问题。请注意五月份突出显示的日子。另请注意,在单击发生之前,“年份”下拉列表也会丢失。

http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list

代码:

  <script>
$(document).ready(function(){

// get the current date
var today = new Date();
var m = today.getMonth(), d = today.getDate(), y = today.getFullYear();

// Need list of event dates for THIS month only from database.
// Declare 'dates' var before adding "beforeShowDay" option to the datepicker,
// otherwise, highlightDays() does not have the 'dates' array.
dates = [];
fetchEventDays(y, m+1);

$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
setDate: today,
inline: false
});


$('#datepicker').datepicker('option', 'onChangeMonthYear', fetchEventDays);
$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
$('#datepicker').datepicker('option', 'onSelect', getday);


// ------------------------------------------------------------------
// getday
// ------------------------------------------------------------------
function getday(dateText, inst) {
$('#content').load('http://www.mydomain/eventmgr.cgi?do=view_day;date='+dateText+' #eventMgr_content', function() {
alert('Load was performed. '+dateText);
});
}

// ------------------------------------------------------------------
// fetchEventDays
// ------------------------------------------------------------------
function fetchEventDays(year, month) {
var paramStr ='?do=get_event_dates&yr=' + year + '&mo=' + month;
$.get('<%config.db_cgi_url%>/eventmgr-ajax.cgi'+ paramStr, function(data) {
var recur_dates = data.split(',');
for(var i = 0; i < recur_dates.length; i++) {
var date_parts = recur_dates[i].split('-');
dates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2]));
}

// This causes dates with events to highlight on initial draw, but
// when clicking to the next month, it switches back to orig month.
// $('#datepicker').datepicker('option', {}); // Refresh

});
}

// ------------------------------------------------------------------
// highlightDays
// ------------------------------------------------------------------
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if ((dates[i].getTime() == date.getTime())) {
return [true, 'highlight'];
}
}
return [true, ''];
}


});
</script>

最佳答案

谢谢@kingjiv你是100%正确的。日历在获取请求完成之前显示。我尝试使用 when 方法,但无法异步获取日期。基本上,我必须在显示日历之前突出显示日期,因此我必须使用 async: false (不是 true)。

我已经包含了完整的代码,演示了如何使用 beforeShowDay 选项突出显示从数据库中提取的多个事件。使用 asyc: false 修复了突出显示的日期在初始抽奖时未突出显示的问题。还包括用于更改单元格背景颜色的 css。

仍然存在一个小问题,即“年份”下拉菜单在初始绘制时不显示,但我已经确认这只发生在 FireFox 4 中。任何对日历的单击都会导致显示年份菜单。 Safari 在首次绘制时正确显示年份菜单。

     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<style type="text/css">
/* Dates with events on them. Text color - red, background - pastel yellow. */
td.highlight, table.ui-datepicker-calendar tbody td.highlight a {
background: none !important;
background-color: #fffac2 !important;
color: #FF0000;
}

/* This is Today's day in rightsidebar mini calendar (datepicker). */
/* Restore style to that of a default day, then just bold it. */
.ui-state-highlight, .ui-widget-content .ui-state-highlight {
border: 1px solid #d3d3d3;
background: #e6e6e6 url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: bold;
color: #555555;
}

/* This is the selected day in the inline datepicker. */
.ui-state-active, .ui-widget-content .ui-state-active {
color: #000000;
opacity: 1.0;
filter:Alpha(Opacity=100);
border: 1px solid #000000;
}

/* Add a little separation between month and year select menus */
.ui-datepicker select.ui-datepicker-month {
width: 42%;
margin-right: 6px;
}

</style>

<script>
$(document).ready(function(){

// get the current date
var today = new Date();
var m = today.getMonth(), d = today.getDate(), y = today.getFullYear();

// Get a list of dates that contain events in THIS month only from database.
// Declare and populate 'eventDates' array BEFORE adding "beforeShowDay" option to
// the datepicker. Otherwise, highlightDays() will have an empty 'eventDates' array.

var eventDates = [];
fetchEventDays(y, m+1); // Get events for the current year and month.

$('#datepicker').datepicker();
$('#datepicker').datepicker('option', 'onChangeMonthYear', fetchEventDays);
$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
$('#datepicker').datepicker('option', 'onSelect', getday);
$('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
$('#datepicker').datepicker('option', 'changeYear', true);
$('#datepicker').datepicker('option', 'changeMonth', true);
$('#datepicker').datepicker('option', 'yearRange', '2010:2012');
$('#datepicker').datepicker('option', 'showButtonPanel', true);

// Disable all dates prior to today.
// $('#datepicker').datepicker('option', 'minDate', new Date(y, m, d));

// ------------------------------------------------------------------
// getday - Replaces the #content div of the current page with
// the content of the page that is created and displayed via perl
// ------------------------------------------------------------------
function getday(dateText, inst) {
$('#content').load('<%config.db_cgi_url%>/eventmgr.cgi?do=view_day;date='+dateText+' #eventMgr_content', function() {
// alert('load was performed. '+dateText);
});
}

// ------------------------------------------------------------------
// fetchEventDays - The ajax call below is synchronous (NOT asynchronous).
// eventDates array must be populated prior to adding the beforeShowDay option
// to the datepicker, otherwise, highlightDays() will have an empty eventDates array.
// ------------------------------------------------------------------
function fetchEventDays(year, month, inst) {
var url ='<%config.db_cgi_url%>/eventmgr-ajax.cgi?do=get_event_dates&yr=' + year + '&mo=' + month;

$.ajax({
url: url,
async: false,
success: function(result){
var event_dates = result.split(',');
for(var i = 0; i < event_dates.length; i++) {
var date_parts = event_dates[i].split('-');
eventDates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2]));
}
}
});
}

// ------------------------------------------------------------------
// highlightDays - Add a custom css class to dates that exist in the
// eventDates array. Must also add the css for td.highlight (above).
// ------------------------------------------------------------------
function highlightDays(date) {
for (var i = 0; i < eventDates.length; i++) {
if ((eventDates[i].getTime() == date.getTime())) {
return [true, 'highlight'];
}
}
return [true, ''];
}

});
</script>

关于jQuery Datepicker beforeShowDay 仅在第一次点击后才起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5955783/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com