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/.
                    $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
                    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
                
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
                
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.
            
            
public array $containerOptions = []
                
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
                
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
                
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
                protected function hasModel()
    return $this->model instanceof Model && $this->attribute !== null;
    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;
                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));
                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);
    JuiAsset::register($this->getView());
    $this->registerClientEvents($name, $id);
    $this->registerClientOptions($name, $id);
    // 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);
    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());