APEX: jQuery-DatePicker verwenden

Die JavaScript-Library jQuery bietet verschiedene Komponenten, mit denen die eigene Webseite angereichert werden kann.

Ich möchte heute beispielhaft die Integration der DatePicker-Komponente in einem APEX-Item (Textfeld) zeigen.

Folgende Scripte benötigen wir:

• jqueryjs
• UI Core Development bundle

In dem Bundle sind noch ein paar mehr Komponenten, die man für weitere Erweiterungen nutzen kann. Aus diesem Paket benötigen wir die Dateien:

• flora.datepicker.css
• ui.core.min.js
• ui.datepicker-de.js
• ui.datepicker.min.js

Um die JavaScript und CSS-Dateien nutzen zu können, lädt man sie bei den Shared Components zu den Static Files bzw. Cascading Style Sheets hoch. Nun referenziert man diese Dateien entweder im Page-Template (Definition/Header) Bild 1, oder auf der einzelnen Seite(Header and Footer/Header Text) Bild 2, falls sie nur dort verwendet werden sollen.

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.2.6.min.js"></script>
<link rel="stylesheet" href="#WORKSPACE_IMAGES#flora.datepicker.css" type="text/css" />
<script type="text/javascript" src="#WORKSPACE_IMAGES#ui.core.min.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#ui.datepicker-de.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#ui.datepicker.min.js"></script>

Anschließend können wir uns daran machen, auf der gewünschten Seite das Textfeld anzusprechen. Dazu habe ich auf Seite 6 ein Text-Item “P6_DATUM” angelegt und folgenden Code in den schon o.g. “Header and Footer/Header Text”-Bereich der Seite 6 geschrieben:

<script type="text/javascript">

<script type="text/javascript">

$.dpText = {
	TEXT_PREV_YEAR		:	'DE Previous year',
	TEXT_PREV_MONTH		:	'DE Previous month',
	TEXT_NEXT_YEAR		:	'DE Next year',
	TEXT_NEXT_MONTH		:	'DE Next month',
	TEXT_CLOSE			:	'DE Close',
	TEXT_CHOOSE_DATE	:	'DE Choose date'
}

$().ready(function()
{
  $("#P6_DATUM").datepicker();
});

</script>

Durch die “dpText”-Variable bekomme ich einen Deutschen Kalender angezeigt.

Wenn die Seite 6 nun aufgerufen und in das Textfeld geklickt wird, erscheint der bunte Kalender direkt darunter (Bild 3) und nicht wie gewohnt in einem PopUp-Fenster.