yii2/docs/guide/widget-jui.md

jQuery UI Widgets

Note: This section is under development.

Yii includes support for the jQuery UI library in an official extension. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Installation

The preferred way to install the extension is through composer.

Either run

php composer.phar require --prefer-dist yiisoft/yii2-jui "*"

or add

"yiisoft/yii2-jui": "*"

to the require section of your composer.json file.

Yii widgets

Most complex jQuery UI components are wrapped into Yii widgets to allow more robust syntax and integrate with framework features. All widgets belong to \yii\jui namespace:

• yii\jui\Accordion
• yii\jui\AutoComplete
• yii\jui\DatePicker
• yii\jui\Dialog
• yii\jui\Draggable
• yii\jui\Droppable
• yii\jui\Menu
• yii\jui\ProgressBar
• yii\jui\Resizable
• yii\jui\Selectable
• yii\jui\Slider
• yii\jui\SliderInput
• yii\jui\Sortable
• yii\jui\Spinner
• yii\jui\Tabs

In the following sections some use cases of these widgets are covered.

Handling date input with the DatePicker

Using the yii\jui\DatePicker widget, collecting date input from users can be done in a very convenient way. In the following example we will use a Task model which has a deadline attribute, which should be set by a user using an ActiveForm. The attribute value will be stored as a unix timestamp in the database.

In this situation there are 3 components that play together:

• The yii\jui\DatePicker widget, which is used in the form to display the input field for the model's attribute.
• The formatter application component which is responsible for the date format that is displayed to the user.
• The DateValidator which will validate the user input and convert it to a unix timestamp.

First, we add the date picker input field to the form by using the yii\widgets\ActiveField::widget() method of the form field:

<?= $form->field($model, 'deadline')->widget(\yii\jui\DatePicker::className(), [
    // if you are using bootstrap, the following line will set the correct style of the input field
    'options' => ['class' => 'form-control'],
    // ... you can configure more DatePicker properties here
]) ?>

The second step is to configure the date validator in the model's rules() method:

public function rules()
{
    return [
        // ...

        // ensure empty values are stored as NULL in the database
        ['deadline', 'default', 'value' => null],

        // validate the date and overwrite `deadline` with the unix timestamp
        ['deadline', 'date', 'timestampAttribute' => 'deadline'],
    ];
}

We have also added a default value filter to ensure empty values are stored as NULL in the database. You may skip this step if your date value is required.

The default format of both, date picker and date validator is the value of Yii::$app->formatter->dateFormat so you can use this property to configure the format of the date for the whole application. To change the date format you have to configure yii\validators\DateValidator::format and yii\jui\DatePicker::dateFormat.