...
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
...
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
| Codeblock | ||
|---|---|---|
| ||
JS::activate('cx'); |
Der obige PHP-Code lädt automatisch alle benötigten Datepicker-Dateien.
Beispiel 1
| Codeblock | ||
|---|---|---|
| ||
<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
| Codeblock | ||
|---|---|---|
| ||
<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
| Codeblock | ||
|---|---|---|
| ||
<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
| Codeblock | ||
|---|---|---|
| ||
<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: https://dev.cloudrexx.com/Javascript%20Framework/.