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:

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.

Bild 1 Bild 2

<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.

Bild 3

Dieser Beitrag wurde unter APEX abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

2 Antworten zu APEX: jQuery-DatePicker verwenden

  1. Pingback: CC13.com » Liest Oracle mein Blog?

  2. Pingback: CC13.com » Blog Archive » APEX: jquery resizable und Textareas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.