oracle-apex - 从页面内嵌入的 JavaScript 调用 apex.widget.datepicker

Question

我正在尝试调用 apex.widget.datepicker 将带有时间的自定义日期选择器应用到“页面加载时执行”中的字段。在以前版本的 Apex 中，这工作正常，但我们最近迁移到 Apex 4.1.1.00.23

页面加载时出现的 JS 错误是“TypeError: can't convert undefined to object”

另一方面，我可以将字段的类型更改为日期，但是如何自定义已绑定到该特定字段的 jquery 日期对象？

Answer 1

当我访问 4.1.1 工作区时（因为 apex.oracle.com 已更新到 4.2），我立即尝试重现这些问题。然而，我做不到！我发誓我在 apex.oracle.com 上遇到了问题，但我不确定我是否犯了错误。

实际上，4.1.0 和 4.1.1 的响应完全一样，正如我所期望的那样。4.2 有所不同，但只有一点点不同。我不知道为什么到现在为止我浪费了这么多时间，我一定是真的错过了一些明显的逻辑缺陷。

我不知道 4.0 和 4.1 之间发生了什么变化，所以我不确定你做了什么来初始化 4.0 中的日期选择器。如果您所要做的只是调用apex.widget.datepicker一个项目以使其工作，那么在 4.1 中会发生一些变化，因为涉及到一个额外的步骤。

在调用之前apex.widget.datepicker，您必须确保已加载语言环境。在打开操作 > 过滤器菜单时，我通过检查 apex 发出的 ajax 调用发现了这一点。该代码将带有源设置的脚本标记附加到apex_images目录中的 datepicker 语言环境文件。该文件初始化日期选择器中的一些变量。
例如，语言为 english = 的应用程序'en'将初始化为apex.jQuery.datepicker.regional['en']

这很重要，因为如果这没有发生，您会收到undefined对象错误，因为小部件代码会尝试访问这些语言环境变量。如果脚本代码没有被附加，它们就不会被附加，并且apex.widget.datepicker会抛出一个错误。

为确保 datepicker 代码正常工作，您需要包含 locale javascript 文件。您可以通过将其添加到页面标题、页面本身、模板中来执行此操作，或者您可以动态地执行此操作：由您决定最佳位置。

以下是动态添加语言环境文件的示例：

$(document).append('<script type="text/javascript" src="/i/libraries/jquery-ui/1.8.14/ui/i18n/oracle/jquery.ui.datepicker-en.js"></script>');

这将获取给定目录中的文件（与 actions>filter 相同），它看起来像这样：

//******  AMERICAN  ******
apex.jQuery(function($){
apex.jQuery.datepicker.regional['en'] = {
closeText: "Close",
prevText: "Prev",
nextText: "Next",
currentText: "Today",
monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December" ],
monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" ],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday" ],
dayNamesShort: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat" ],
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa" ],
weekHeader: "Wk",
dateFormat: "dd-M-y",firstDay: 0,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""};
apex.jQuery.datepicker.setDefaults(apex.jQuery.datepicker.regional['en']);
});

现在，请注意该路径存在一些硬编码问题。有'/i/'、jquery 版本和语言环境。对于 jquery 版本，无能为力。 /i/可以用语言环境替换 可以用应用程序变量apex_img_dir 捕获BROWSER_LANGUAGE

$(document).append('<script type="text/javascript" src="'+apex_img_dir+'libraries/jquery-ui/1.8.14/ui/i18n/oracle/jquery.ui.datepicker-&BROWSER_LANGUAGE..js"></script>');

应该做的伎俩（检查你的ajax调用以确保！）

包含脚本后，调用 apex.widget.datepicker 应该是安全的！

现在，我也一直在尝试4.2，它在那里几乎是一样的。唯一改变的是您必须包含小部件代码！

$(document).append('<script type="text/javascript" src="'+apex_img_dir+'libraries/jquery-ui/1.8.22/ui/i18n/oracle/jquery.ui.datepicker-en.js"></script>' +
'<script type="text/javascript" src="'+apex_img_dir+'libraries/apex/minified/widget.datepicker.min.js?v=4.2.0.00.19"></script>');

这应该涵盖了大部分。