Class yii\jui\DatePicker

Inheritanceyii\jui\DatePicker » yii\jui\InputWidget » yii\jui\Widget » yii\base\Widget
Available since extension's version2.0
Source Code https://github.com/yiisoft/yii2-jui/blob/master/DatePicker.php

DatePicker renders a datepicker jQuery UI widget.

For example to use the datepicker with a \yii\base\Model:

echo DatePicker::widget([
    'model' => $model,
    'attribute' => 'from_date',
    //'language' => 'ru',
    //'dateFormat' => 'yyyy-MM-dd',
]);

The following example will use the name property instead:

echo DatePicker::widget([
    'name'  => 'from_date',
    'value'  => $value,
    //'language' => 'ru',
    //'dateFormat' => 'yyyy-MM-dd',
]);

You can also use this widget in an \yii\widgets\ActiveForm using the \yii\widgets\ActiveField::widget() method, for example like this:

<?= $form->field($model, 'from_date')->widget(\yii\jui\DatePicker::classname(), [
    //'language' => 'ru',
    //'dateFormat' => 'yyyy-MM-dd',
]) ?>

Note that and empty string ('') and null will result in an empty text field while 0 will be interpreted as a UNIX timestamp and result in a date displayed as 1970-01-01. It is recommended to add a validation filter in your model that sets the value to null in case when no date has been entered:

[['from_date'], 'default', 'value' => null],

See also http://api.jqueryui.com/datepicker/.

Public Properties

Hide inherited properties

Property Type Description Defined By
$attribute string The model attribute that this widget is associated with. yii\jui\DatePicker
$clientEventMap array Event names mapped to what should be specified in .on(). yii\jui\Widget
$clientEvents array The event handlers for the underlying jQuery UI widget. yii\jui\Widget
$clientOptions array The options for the underlying jQuery UI widget. yii\jui\Widget
$containerOptions array The HTML attributes for the container tag. yii\jui\DatePicker
$dateFormat string The format string to be used for formatting the date value. yii\jui\DatePicker
$inline boolean If true, shows the widget as an inline calendar and the input as a hidden field. yii\jui\DatePicker
$language string The locale ID (e.g. 'fr', 'de', 'en-GB') for the language to be used by the date picker. yii\jui\DatePicker
$model \yii\base\Model The data model that this widget is associated with. yii\jui\InputWidget
$name string The input name. yii\jui\InputWidget
$options array The HTML attributes for the widget container tag. yii\jui\Widget
$value string The input value. yii\jui\DatePicker

Protected Properties

Hide inherited properties

Property Type Description Defined By

Public Methods

Hide inherited methods

Method Description Defined By
init() Initializes the widget. yii\jui\DatePicker
run() Renders the widget. yii\jui\DatePicker

Protected Methods

Hide inherited methods

Method Description Defined By
hasModel() yii\jui\InputWidget
registerClientEvents() Registers a specific jQuery UI widget events yii\jui\Widget
registerClientOptions() Registers a specific jQuery UI widget options yii\jui\Widget
registerWidget() Registers a specific jQuery UI widget asset bundle, initializes it with client options and registers related events yii\jui\Widget
renderWidget() Renders the DatePicker widget. yii\jui\DatePicker

Property Details

Hide inherited properties

$attribute public property

The model attribute that this widget is associated with. The value of the attribute will be converted using \yii\i18n\Formatter::asDate() with the $dateFormat if it is not null.

public string $attribute null
$containerOptions public property

The HTML attributes for the container tag. This is only used when $inline is true.

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

$dateFormat public property

The format string to be used for formatting the date value. This option will be used to populate the clientOption dateFormat. The value can be one of "short", "medium", "long", or "full", which represents a preset format of different lengths.

It can also be a custom format as specified in the ICU manual. Alternatively this can be a string prefixed with php: representing a format that can be recognized by the PHP date()-function.

For example:

'MM/dd/yyyy' // date in ICU format
'php:m/d/Y' // the same date in PHP format

If not set the default value will be taken from Yii::$app->formatter->dateFormat.

public string $dateFormat null
$inline public property

If true, shows the widget as an inline calendar and the input as a hidden field.

public boolean $inline false
$language public property

The locale ID (e.g. 'fr', 'de', 'en-GB') for the language to be used by the date picker. If this property is empty, then the current application language will be used.

Since version 2.0.2 a fallback is used if the application language includes a locale part (e.g. de-DE) and the language file does not exist, it will fall back to using de.

public string $language null
$value public property

The input value. This value will be converted using \yii\i18n\Formatter::asDate() with the $dateFormat if it is not null.

public string $value null

Method Details

Hide inherited methods

hasModel() protected method
protected boolean hasModel ( )
return boolean

Whether this widget is associated with a data model.

                protected function hasModel()
{
    return $this->model instanceof Model && $this->attribute !== null;
}

            
init() public method

Initializes the widget.

If you override this method, make sure you call the parent implementation first.

public void init ( )

                public function init()
{
    parent::init();
    if ($this->inline && !isset($this->containerOptions['id'])) {
        $this->containerOptions['id'] = $this->options['id'] . '-container';
    }
    if ($this->dateFormat === null) {
        $this->dateFormat = Yii::$app->formatter->dateFormat;
    }
}

            
registerClientEvents() protected method

Defined in: yii\jui\Widget::registerClientEvents()

Registers a specific jQuery UI widget events

protected void registerClientEvents ( $name, $id )
$name string

The name of the jQuery UI widget

$id string

The ID of the widget

                protected function registerClientEvents($name, $id)
{
    if (!empty($this->clientEvents)) {
        $js = [];
        foreach ($this->clientEvents as $event => $handler) {
            if (isset($this->clientEventMap[$event])) {
                $eventName = $this->clientEventMap[$event];
            } else {
                $eventName = strtolower($name . $event);
            }
            $js[] = "jQuery('#$id').on('$eventName', $handler);";
        }
        $this->getView()->registerJs(implode("\n", $js));
    }
}

            
registerClientOptions() protected method

Defined in: yii\jui\Widget::registerClientOptions()

Registers a specific jQuery UI widget options

protected void registerClientOptions ( $name, $id )
$name string

The name of the jQuery UI widget

$id string

The ID of the widget

                protected function registerClientOptions($name, $id)
{
    if ($this->clientOptions !== false) {
        $options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
        $js = "jQuery('#$id').$name($options);";
        $this->getView()->registerJs($js);
    }
}

            
registerWidget() protected method

Defined in: yii\jui\Widget::registerWidget()

Registers a specific jQuery UI widget asset bundle, initializes it with client options and registers related events

protected void registerWidget ( $name, $id null )
$name string

The name of the jQuery UI widget

$id string

The ID of the widget. If null, it will use the id value of $options.

                protected function registerWidget($name, $id = null)
{
    if ($id === null) {
        $id = $this->options['id'];
    }
    JuiAsset::register($this->getView());
    $this->registerClientEvents($name, $id);
    $this->registerClientOptions($name, $id);
}

            
renderWidget() protected method

Renders the DatePicker widget.

protected string renderWidget ( )
return string

The rendering result.

                protected function renderWidget()
{
    $contents = [];
    // get formatted date value
    if ($this->hasModel()) {
        $value = Html::getAttributeValue($this->model, $this->attribute);
    } else {
        $value = $this->value;
    }
    if ($value !== null && $value !== '') {
        // format value according to dateFormat
        try {
            $value = Yii::$app->formatter->asDate($value, $this->dateFormat);
        } catch(InvalidParamException $e) {
            // ignore exception and keep original value if it is not a valid date
        }
    }
    $options = $this->options;
    $options['value'] = $value;
    if ($this->inline === false) {
        // render a text input
        if ($this->hasModel()) {
            $contents[] = Html::activeTextInput($this->model, $this->attribute, $options);
        } else {
            $contents[] = Html::textInput($this->name, $value, $options);
        }
    } else {
        // render an inline date picker with hidden input
        if ($this->hasModel()) {
            $contents[] = Html::activeHiddenInput($this->model, $this->attribute, $options);
        } else {
            $contents[] = Html::hiddenInput($this->name, $value, $options);
        }
        $this->clientOptions['defaultDate'] = $value;
        $this->clientOptions['altField'] = '#' . $this->options['id'];
        $contents[] = Html::tag('div', null, $this->containerOptions);
    }
    return implode("\n", $contents);
}

            
run() public method

Renders the widget.

public void run ( )

                public function run()
{
    echo $this->renderWidget() . "\n";
    $containerID = $this->inline ? $this->containerOptions['id'] : $this->options['id'];
    $language = $this->language ? $this->language : Yii::$app->language;
    if (strncmp($this->dateFormat, 'php:', 4) === 0) {
        $this->clientOptions['dateFormat'] = FormatConverter::convertDatePhpToJui(substr($this->dateFormat, 4));
    } else {
        $this->clientOptions['dateFormat'] = FormatConverter::convertDateIcuToJui($this->dateFormat, 'date', $language);
    }
    if ($language !== 'en-US') {
        $view = $this->getView();
        $assetBundle = DatePickerLanguageAsset::register($view);
        $assetBundle->language = $language;
        $options = Json::htmlEncode($this->clientOptions);
        $language = Html::encode($language);
        $view->registerJs("jQuery('#{$containerID}').datepicker($.extend({}, $.datepicker.regional['{$language}'], $options));");
    } else {
        $this->registerClientOptions('datepicker', $containerID);
    }
    $this->registerClientEvents('datepicker', $containerID);
    JuiAsset::register($this->getView());
}