How to "force" a krajee bootstrap daterangepicker to be readonly? - yii2

Question

I'm using krajee DatePicker.
use yii\helpers\Html;
use yii\widgets\DetailView;
use yii\web\View;
use yii\data\ActiveDataProvider;
use kartik\widgets\DatePicker;
use yii\web\JsExpression;
echo DatePicker::widget([
'name' => 'dp',
'id' => 'dp',
'type' => DatePicker::TYPE_INLINE,
'value' => '',
'pluginOptions' => [
'startDate' => $model->fecha_inicio,
'format' => 'yyyy-mm-dd',
'beforeShowDay' => new \yii\web\JsExpression("function(date) {
startDate = new Date('".$model->fecha_inicio."');
endDate = new Date('".$model->fecha_fin."');
between=startDate<=date && endDate>=date;
console.log(date+' '+ (between));
dateFormat = date.getUTCFullYear() + '-' + ('0'+(date.getUTCMonth()+1)).slice(-2) + '-' + ('0'+date.getUTCDate()).slice(-2);
if (dateFormat == '".$model->fecha_inicio."') {
return {classes: 'start-date', tooltip: 'Title'};
}
if (dateFormat == '".$model->fecha_fin."') {
return {classes: 'end-date', tooltip: 'Title'};
}
if (between) {
return {classes: 'in-range available'}; //create a custom class in css with back color you want
}
return false;
}"),
],
'options' => [
// you can hide the input by setting the following
'class' => 'hide'
]
]);
Is there any way to render the DateRangePicker without it being able to recieve user input? (eg. no hover, no date selection). I want to render it on a webpage just to inform the user of a range, but the fact that the user can interact with it feels awkward in this scenario.

Answer 1

You can try to add "readonly" to the options. Just like this:
'options' => [
// you can hide the input by setting the following
'class' => 'hide',
'readonly' => 'readonly'
]

Answer 2

Try to use in your options array attribute disabled. SO it would be
'options' => [
'disabled' => 'true',
'class' => 'hide'
]

Answer 3

Well, this helped me do the trick, based on this answer.
Basically, I ended up using a wrapping div with the style:
<div style="pointer-events:none;"> ... </div>
This solved it easily and directly, and it seems to have decent cross-browser support.
<?php
echo '<div class="well well-sm" style="background-color: #fff; width:245px; pointer-events:none;">';
$date = new \DateTime($model->fecha_inicio);
$days = Proceso::calcularDias ($model->fecha_inicio,$model->fecha_fin);
echo DatePicker::widget([
'name' => 'dp',
'id' => 'dp',
'type' => DatePicker::TYPE_INLINE,
'value' => '',
'pluginOptions' => [
'defaultViewDate' => ([
'year'=>(int)$date->format('Y'),
'month'=>$date->format('m')-1,
'day'=>(int)$date->format('d')
]),
'format' => 'yyyy-mm-dd',
'beforeShowDay' => new JsExpression("function(date) {
startDate = new Date('".$model->fecha_inicio."');
endDate = new Date('".$model->fecha_fin."');
between=startDate<=date && endDate>=date;
dateFormat = date.getUTCFullYear() + '-' + ('0'+(date.getUTCMonth()+1)).slice(-2) + '-' + ('0'+date.getUTCDate()).slice(-2);
if (dateFormat == '".$model->fecha_inicio."') {
return {classes: 'start-date', tooltip: 'Title'};
}
if (dateFormat == '".$model->fecha_fin."') {
return {classes: 'end-date', tooltip: 'Title'};
}
if (between) {
return {classes: 'in-range available'}; //create a custom class in css with back color you want
}
return false;
}"),
],
'pluginEvents'=>[
],
'options' => [
'disabled' => 'true',
// you can hide the input by setting the following
'class' => 'hide'
]
]);
echo '</div>';
?>