自定义yii2日期时间选择器

时间:2020-06-15 15:02:59

标签: php bootstrap-4 yii2 kartik-v

PHP 7.0.33和yii2 2.0.16在这里。

我需要自定义yii2日期时间选择器,但有时遇到问题。我看了一些扩展,最终使用了以下扩展,因为它使我能够最接近想要实现的目标:

https://github.com/kartik-v/yii2-date-range

所以,我的代码是这样:

$dateRangePickerOptions = [
    'language' => 'en',
    'name'=>'date_end',
    'convertFormat' => true,
    'pluginOptions' => [
        'timePicker' => true,
        'timePickerIncrement' => 30,
        'locale' => [
            'format' => 'Y-m-d H:i',
        ],
        'singleDatePicker' => true,
        'showDropdowns' => true,
    ]
];

$form = ActiveForm::begin();
echo $form->field($model, 'date_end')->widget(DateRangePicker::classname(), $dateRangePickerOptions);
ActiveForm::end();

结果是这样的:

enter image description here

几乎不错,但是有些事情我无法弄清楚是否可以自定义:

  1. 我希望AM / PM下拉列表消失,而时间下拉列表以24小时格式显示小时。

  2. 当我开始选择日期,时间,分钟时,目标表单元素的边框变为红色,警告我该字段不能为空。没错,在我点击“应用”按钮之前,该字段不得为空,但不得显示警告。

除了这些,我还考虑了一些“很不错”的定制:

  1. 周六和周日将被禁用。

  2. 小时下拉字段的选项应仅显示7到16之间的小时。

我还介绍了此扩展名:https://github.com/kartik-v/yii2-widget-datetimepicker

但这都不能让我完全达到我的描述。 只要我能达到上述要点,我就可以接受任何建议,甚至可以接受完全不同的扩展/方法。

1 个答案:

答案 0 :(得分:1)

您需要使用引导插件的选项timePicker24Hour,请参阅选项http://www.daterangepicker.com/#options

您的选项数组应类似于

$dateRangePickerOptions = [
    'language' => 'en',
    'name'=>'date_end',
    'convertFormat' => true,
    'pluginOptions' => [
        'timePicker' => true,
        'timePickerIncrement' => 30,
        'locale' => [
            'format' => 'Y-m-d H:i',
        ],
        'singleDatePicker' => true,
        'showDropdowns' => true,
        'timePicker24Hour'=>true
    ]
];