Skip to content

Datepicker

Cloudrexx uses the jQuery Datepicker and Datetimepicker UI widgets for selecting a date or time.

How to Use

Note

  • By default, the format of the date is dd.mm.yy and the format of the time is hh:mm:ss.
  • The locale used by the picker is set automaticlaly through to i18n. Missing locales can be added as additional files under /lib/javascript/jquery/ui/i18n.
  • The default style file is located at /lib/javascript/jquery/ui/css/jquery-ui.css. Don't edit this file because it fits for the Contrexx backend. If you want to load your own style in the frontend, you can create a style file at /themes/<theme>/jquery-ui.css. Javascript automatically loads this file if it exists.

Activation

As the required functionality is provided by the Javascript Framework, it needs to be activated on the server side (using PHP):

1
\JS::activate('cx');

Integration

Automatic widget generation (from PHP)

Use one of Html::getDatepicker(), Html::getDatetimepicker() or Html::getTimepicker() to generate the HTML code for a UI date/time widget.

Date selection

1
2
3
4
$template->setVariable(
    'DATE_SELECTION',
    \HTML::getDatepicker($name)
);

Whereas $name is the HTML input field name attribute and $template is the current instance of \Cx\Core\Html\Sigma.

Date & time selection

1
2
3
4
$template->setVariable(
    'DATETIME_SELECTION',
    \HTML::getDatetimepicker($name)
);

Whereas $name is the HTML input field name attribute and $template is the current instance of \Cx\Core\Html\Sigma.

Time selection

1
2
3
4
$template->setVariable(
    'TIME_SELECTION',
    \HTML::getTimepicker($name)
);

Whereas $name is the HTML input field name attribute and $template is the current instance of \Cx\Core\Html\Sigma.

Manual widget generation (in JavaScript)

Date Picker

1
2
3
4
5
6
7
<script>
cx.ready(function() {
    jQuery('input[name=date]').datepicker();
});
</script>

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

The above code generates a date picker on the input field. The value which is set by the input attribute value is going to be the datepicker's default value.

Date & Time Picker

1
2
3
4
5
6
7
<script>
cx.ready(function() {
    jQuery('input[name=dateTime]').datetimepicker();
});
</script>

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

The above code generates a date & time picker on the input field. The value which is set by the input attribute value is going to be the datetimepicker's default value.

Date & Time Picker with custom format

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
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}" />

The above code generates a date & time picker using a custom format.

Date & Time Picker for start and end date selection

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
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}" />

The above code will generate a datetimepicker for the start and end date. The option "onSelect" allows to define a function which will be executed after selecting a date or time. In this case the function will validate the selection of the user to avoid an invalid date range.