Wie kann der Style von jQuery UI angepasst werden?

In Cloudrexx wird jQuery Datepicker und Datetimepicker zur Auswahl eines Datums oder einer Uhrzeit verwendet. Weitere Informationen finden Sie unter jqueryui.com/datepicker und trentrichardson.com/examples/timepicker/.

Hinweise

Standardmäßig ist das Format des Datums tt.mm.jj und das Format der Uhrzeit hh:mm:ss.
Die Sprache des Pickers wird aufgrund von i18n dynamisch gesetzt. Wenn Ihre Sprache nicht übersetzt ist, können Sie dies selbst tun, indem Sie eine entsprechende Sprachdatei im Verzeichnis /lib/javascript/jquery/ui/i18n hinzufügen.
Die Standardstildatei befindet sich unter /lib/javascript/jquery/ui/css/jquery-ui.css. Bearbeiten Sie diese Datei nicht, da sie für das Backend gebraucht wird. Wenn Sie Ihren eigenen Stil in das Frontend laden möchten, können Sie eine Stildatei unter /themes/YOUR_THEME_FOLDER/jquery-ui.css erstellen. ContrexxJavascript lädt diese Datei automatisch, falls vorhanden.

Aktivierung

JS::activate('cx');

Der obige PHP-Code lädt automatisch alle benötigten Datepicker-Dateien.

Beispiel 1

<script type="text/javascript">
cx.ready(function() {
    jQuery('input[name=date]').datepicker();
});
</script>

<input type="text" name="date" value="{MODULE_DATE}" />

Der obige Code generiert eine Standard-Datumsauswahl. Der Wert, der durch das Eingabeattribut value gesetzt wird, wird der Standardwert des Datepickers sein.

Beispiel 2

<script type="text/javascript">
cx.ready(function() {
    jQuery('input[name=dateTime]').datetimepicker();
});
</script>

<input type="text" name="dateTime" value="{MODULE_DATETIME}" />

Der obige Code generiert einen standardmäßigen datetimepicker. Der Wert, der durch das Eingabeattribut value gesetzt wird, wird der Standardwert des datetimepicker sein.

Beispiel 3

<script type="text/javascript">
cx.ready(function() {
    jQuery('input[name=dateTimeSpecialFormat]').datetimepicker({dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', showSecond: false});
});
</script>

<input type="text" name="dateTimeSpecialFormat" value="{MODULE_DATETIME_SPECIAL_FORMAT}" />

Der obige Code zeigt, wie ein bestimmtes Datums- und Uhrzeitformat verwendet wird.

Beispiel 4

<script type="text/javascript">
cx.ready(function() {
    var options = {
        onSelect: function(dateText, inst) {
            // adjust start or end date to avoid an invalid date range
            var startDate = $J('input[name=dateTimeStart]').datepicker('getDate');
            var endDate = $J('input[name=dateTimeEnd]').datepicker('getDate');

            if ((startDate != null) && (endDate != null) && (startDate > endDate)) {
                if ($J(this).attr('name') == 'dateTimeStart') {
                    $J('input[name=dateTimeEnd]').datepicker('setDate', dateText);
                } else {
                    $J('input[name=dateTimeStart]').datepicker('setDate', dateText);
                }
            }
        }
    };
    jQuery('input[name=dateTimeStart]').datetimepicker(options);
    jQuery('input[name=dateTimeEnd]').datetimepicker(options);
});
</script>

<input type="text" name="dateTimeStart" value="{MODULE_DATETIME_START}" />
<input type="text" name="dateTimeEnd" value="{MODULE_DATETIME_END}" />

Der obige Code generiert einen datetimepicker für das Start- und Enddatum. Die Option onSelect ermöglicht es, eine Funktion zu definieren, die nach Auswahl eines Datums oder einer Uhrzeit ausgeführt wird. In diesem Fall validiert die Funktion die Auswahl des Benutzers, um einen ungültigen Datumsbereich zu vermeiden.