README

Bootstrap 日期选择器和输入掩码的结合。换句话说，您可以在同一字段中同时拥有日期选择器和输入掩码。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

composer require sguinfocom/date-picker-masked-widget="*"

或将其添加到应用程序的 composer.json 文件的 require 部分：

"sguinfocom/date-picker-masked-widget": "*"

使用方法

普通日期选择器

------> 带有模型 <------

作为一个普通小部件

<?php
use sguinfocom\DatePickerMaskedWidget\DatePickerMaskedWidget;
?>
<?=
    DatePickerMaskedWidget::widget([
            'model' => '$modelName',
            'value' => '30-16-2016'
            'attribute' => false,
            'template' => '{addon}{input}',
            'language' => 'fi',
            'clientOptions' => [
            'autoclose' => true,
            'clearBtn' => true,
            'format' => 'dd.mm.yyyy',
            'todayBtn' => 'linked',
            'todayHighlight' => 'true',
            'weekStart' => '1',
            'calendarWeeks' => 'true',
            'orientation' => 'top left',
        ],
        'maskOptions' => [
            'alias' => 'dd.mm.yyyy'
        ],
    ]);
?>

与 ActiveForm 一起使用

<?=
    $form->field($model, 'nameOfField')->widget(
        DatePickerMaskedWidget::className(), [
            'inline' => false,
            'template' => '{addon}{input}',
            'language' => 'fi',
            'clientOptions' => [
                'autoclose' => true,
                'clearBtn' => true,
                'format' => 'dd.mm.yyyy',
                'todayBtn' => 'linked',
                'todayHighlight' => 'true',
                'weekStart' => '1',
                'calendarWeeks' => 'true',
                'orientation' => 'top left',
            ],
            'maskOptions' => [
                'alias' => 'dd.mm.yyyy'
            ],

        ]
    );
?>

------> 没有模型 <------

<?php
use sguinfocom\DatePickerMaskedWidget\DatePickerMaskedWidget;
?>
<?=
    DatePickerMaskedWidget::widget([
        'name' => 'test',
        'value' => '30-16-2016'
        'attribute' => false,
        'template' => '{addon}{input}',
        'language' => 'fi',
        'clientOptions' => [
            'autoclose' => true,
            'clearBtn' => true,
            'format' => 'dd.mm.yyyy',
            'todayBtn' => 'linked',
            'todayHighlight' => 'true',
            'weekStart' => '1',
            'calendarWeeks' => 'true',
            'orientation' => 'top left',
        ],
        'maskOptions' => [
            'alias' => 'dd.mm.yyyy'
        ],
    ]);
?>

####日期范围选择器

------> 没有模型 <------

<?php
use sguinfocom\DatePickerMaskedWidget\DateRangePickerMaskedWidget;
?>
<?=
    DateRangePickerMaskedWidget::widget([
        'name' => 'test',
        'value' => '30-16-2016'
        'attribute' => false,
        'template' => '{addon}{input}',
        'language' => 'fi',
        'clientOptions' => [
            'autoclose' => true,
            'clearBtn' => true,
            'format' => 'dd.mm.yyyy',
            'todayBtn' => 'linked',
            'todayHighlight' => 'true',
            'weekStart' => '1',
            'calendarWeeks' => 'true',
            'orientation' => 'top left',
        ],
        'maskOptions' => [
            'alias' => 'dd.mm.yyyy'
        ],
    ]);
?>

------> 带有模型 <------

<?php
use sguinfocom\DatePickerMaskedWidget\DateRangePickerMaskedWidget;
?>
<?=
    $form->field($model, 'startDate')->widget(DateRangePickerMaskedWidget::className(), [
        'attributeTo' => 'endDate',
        'form' => $form, // best for correct client validation
        'language' => 'es',
        'size' => 'lg',
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'dd-M-yyyy'
        ]
    ]);
?>

更多信息

请查看 Bootstrap DatePicker 网站 文档以获取有关其配置选项的更多信息。或查看 Masked Input Demo 以了解如何使用掩码的示例。阅读源文件以了解小部件的工作原理。

许可证

BSD 许可证（BSD）。请参阅 许可证文件 以获取更多信息。

致谢

• Diana Giova