ar2rsoft/yii2-datetime-widget

基于 Yii2 框架的日期/时间选择小部件

安装: 8

依赖关系: 0

建议者: 0

安全性: 0

星星: 0

关注者: 2

分支: 14

类型:yii2-extension

1.1.1 2018-11-23 12:01 UTC

This package is auto-updated.

Last update: 2024-09-14 08:48:58 UTC


README

基于 Eonasdan 的 Bootstrap 3 日期/时间选择小部件的 Yii2 框架日期/时间选择小部件,详见 Eonasdan's Bootstrap 3 Date/Time Picker DateTimePicker

演示

由于这是 yii2-starter-kit 的一部分,其演示可以在启动套件演示中找到 这里

Login: webmaster
Password: webmaster

开始之前

请确保已安装 fxp/composer-asset-plugin

composer global require fxp/composer-asset-plugin

安装

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

运行以下命令之一:

php composer.phar require trntv/yii2-datetime-widget

或者

"trntv/yii2-datetime-widget": "*"

将以下内容添加到您的 composer.json 文件的 require 部分。

使用方法

安装扩展后,只需在您的代码中通过以下方式使用它:

<?php echo $form->field($model, 'attribute')->widget(
        'trntv\yii\datetime\DateTimeWidget',
        [ ... options ... ]
    ); 
?>

选项

phpDatetimeFormat - PHP ICU 日期时间格式(默认:dd.MM.yyyy, HH:mm

momentDatetimeFormat - Moment JS 日期时间格式(默认:DD.MM.YYYY, HH:mm

showAddon - 显示或隐藏输入插件(默认:true

addonContent - 插件内容

phpMomentMapping - 格式映射(默认:true

containerOptions - 小部件容器选项

showInput - 显示带有日期的输入(如果为 false,则输入将被隐藏)

clientOptions - 所有可用选项的完整列表

*** 注意:要在按钮组中使用时启用小部件在文本框上显示,请使用 allowInputToggle 选项

...
'clientOptions' => [
    'allowInputToggle' => true
]
...

示例

ActiveField 输入小部件

<?php echo $form->field($model, 'datetime')->widget(
    'trntv\yii\datetime\DateTimeWidget',
    [
        'phpDatetimeFormat' => 'yyyy-MM-dd\'T\'HH:mm:ssZZZZZ',
        'clientOptions' => [
            'minDate' => new \yii\web\JsExpression('new Date("2015-01-01")'),
            'allowInputToggle' => false,
            'sideBySide' => true,
            'locale' => 'zh-cn',
            'widgetPositioning' => [
               'horizontal' => 'auto',
               'vertical' => 'auto'
            ]
        ]
    ]
]); ?>

仅日期的独立小部件

<?php echo trntv\yii\datetime\DateTimeWidget::widget([
    'phpDatetimeFormat' => 'yyyy-MM-dd',
]) ; ?>

添加自定义 JS 事件

<?php echo trntv\yii\datetime\DateTimeWidget::widget([
    'clientEvents' => [
        'dp.change' => 'function(e){
            console.log('dp.change');
        }',
    ],
]) ; ?>