- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 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/
我正在尝试使用 720Kb 日期选择器。 https://github.com/720kb/angular-datepicker 使用简单示例时: 我收到打击错误: angular.js:1
我开始使用react-datepicker组件。 https://github.com/Hacker0x01/react-datepicker 我运行了该示例,现在我想对其进行调整,使其没有初始值。示
我正在使用 Angular-ui 日期选择器,除了日期选择器的初始状态外,一切实际上都工作正常。我选择日期后,看起来不错。见下文: 初始状态 在选择器中选择日期后 所以,显然我在第一种情况下得到了日期
我需要为回历日期设置日期选择器。我可以使用 jquery datepicker 或 bootstrap datepicker。但是我写了这段代码
在选择范围时,我遇到了 jquery UI datepicker 的一个奇怪问题。在提出问题之前,我正在研究许多其他人编写的代码。他们以优化的顺序包含了 jquery 工具和 UI,因此所有功能都可以
我有两个剑道 DatePickers 来选择工作的开始和结束日期。作业由多个任务组成,其中包含自己的完成日期(任务在网格中列出,每条记录使用 kendo DatePicker 选择完成日期) 当用户设
我想将功能添加到 Material 日期选择器,以便能够选择周.. 因此,当我从一行中选择一个日期时,我希望它输出从一周开始到一周结束的日期范围。 我之前在常规 jquery 日历上这样做过--检查照
在 SwiftUI 中使用新的 (iOS 14) DatePicker,它按预期工作并且在模拟器和设备上看起来很好,但是一旦日历弹出,我会在输出窗口中收到几行警告。这有点烦人! 虽然日志贴在下面,但看
我将如何创建 doctrine_orm_datetime_range使用 jQuery UI 日期选择器的 Sonata Admin Bundle 中的过滤器? 我尝试了以下方法,但不起作用: pro
有人知道如何设置 gem bootstrap-datepicker-rails 吗?我按照 http://rubydoc.info/gems/bootstrap-datepicker-rails/0.
在 kartik DatePicker Yii2 中有没有办法 - 我可以禁用大于当前日期的日期? 例如:如果今天是 2016 年 3 月 14 日,则应禁用 2016 年 3 月 15 日的日历日期
在 UIDatePicker 我们可以做这样的事情 datePicker.timeZone = TimeZone(secondsFromGMT: 5*60*60) 为了指定日期选择器的时区。 但是如何
我在 FullCalendar ( http://www.eyecon.ro/datepicker/ ) 页面正下方添加了一个 datePicker ( http://fullcalendar.io
我在一个 Polymer 项目中有两个 Vaadin-datepickers。一个有开始日期,一个有结束日期。我想确保结束日期总是在开始日期之后。我阅读了 API 文档,他们说您可以使用 min ma
我正在Angular 6中搜索Datepicker,它可以显示基于回历日历的阿拉伯日期。 似乎找不到一个。是否有可用的东西,或者我们需要从头开始构建它。 最佳答案 Ng bootstrap或angul
JavaFX8 中是否有一种方法可以从 Java 代码中选择 DatePicker 中的日期(作为文本)?我想以这样一种方式激活带有 DatePicker 的控件,用户可以在不使用鼠标的情况下编辑日期
我在一个 Polymer 项目中有两个 Vaadin-datepickers。一个有开始日期,一个有结束日期。我想确保结束日期总是在开始日期之后。我阅读了 API 文档,他们说您可以使用 min ma
我正在尝试验证datepicker,因为startDate应始终小于EndDate。如果我手动更改日期,则 StartDate 有效,但 EndDate 无效。 我的JavaScript代码: $(d
我是 jquery 和 javascript 的菜鸟。因此,虽然我看过很多解决我的问题的 SO 帖子,但我无法将各种解决方案“组装”成适合我的东西。 我的上下文:查询结果显示在表单中。在每一行中,其中
我正在开发 Windows Phone 8.1 应用程序。我正在尝试使用 DatePickerFlyout 但没有取得适当的成功。我正在选择日期并尝试用选定的日期设置按钮内容,但它没有设置。当我调试以
我是一名优秀的程序员,十分优秀!