Calendar

Input field with automatic calendar via jQuery UI.

⚠️ Include required only for pop-ups:

<script type="text/javascript" src="/optitravel/includes/js/widgets_by_class.js"></script>

📅 Simple Calendar Example

Calendar that prevents selecting past dates:

<input type="text" class="date-picker onChange">

Allows selection of any date, including past ones:

<input type="text" class="date-picker onChange" min-date="false">

When two input fields are related (e.g., start and end of a period):

<input type="text" class="date-picker onChange" opti-related="date-picker-end2">
<input type="text" class="date-picker date-picker-end2">

Selecting a date in the first field will limit the available options in the second.

To allow fast selection of year and month, use the changeMonth and changeYear attributes:

<input type="text" class="date-picker onChange"
    changeMonth="true" changeYear="true">

By default, both attributes are set to false.

Use min-date and max-date attributes to set fixed limits:

<input type="text" class="date-picker onChange"
    min-date="2022-01-24"
    max-date="2022-01-27">

To allow manual editing of the date text field, add the editable="true" attribute:

<input type="text" class="date-picker onChange" editable="true">

Without this, the field may behave as read-only depending on the context.

To prevent automatic repositioning of the calendar popup in the UI, add the class:

dontCalibtrateDatePicker

↑ (Last updated: 2025-06-04)