Customize yii2 date time picker

Question

PHP 7.0.33 and yii2 2.0.16 here.

I need to customise a yii2 date time picker and I got stuck at some point. I had a look on a few extensions and I ended up using the following one, as it allowed me to get the closest to what I want to achieve:

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

So, my code is this:

$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();

And the result is this:

Almost good, but there are a few things which I can't figure out whether I could customise:

1. I want the AM/PM drop-down to disappear and the time drop-down to display hours in 24 hour format.

2. When I start picking the date, time, minutes, the border of the target form element turns red, warning me that the field can't be empty. That's true, the field must not be empty but the warning must not be displayed before I hit the Apply button.

Besides these, I'm also thinking of a few 'nice to have' customisation:

1. Saturdays and Sundays to be disabled.

2. The options of the hour drop-down field should only display the hours between 7 and 16.

I also had a look at this extension as an alternative: https://github.com/kartik-v/yii2-widget-datetimepicker

But neither this allows me to achieve exactly what I described. I'm open to any suggestions and even to totally different extensions/approaches as long as I can achieve the described points.

Answer 1

You need to use the option timePicker24Hour of the bootstrap plugin, see options http://www.daterangepicker.com/#options

Your options array should look like

$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
    ]
];