kerjeeブートストラップdaterangepickerを読み込み専用にするにはどうすればいいですか？

Question

私は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' 
    ] 
]); 

ユーザー入力を受け取ることなくDateRangePickerをレンダリングする方法はありますか？ （例えば、ホバーなし、日付選択なし）。範囲をユーザーに知らせるためにウェブページ上にレンダリングしたいが、ユーザーがこのシナリオでやりとりするのは難しいと感じる。

Answer 1

オプションに「読み取り専用」を追加できます。ちょうどこのように：

'options' => [ 
    // you can hide the input by setting the following 
    'class' => 'hide', 
    'readonly' => 'readonly' 
] 

Answer 2

あなたのオプションの配列属性disabledで試してください。 SOそれは

'options' => [ 
     'disabled' => 'true', 
     'class' => 'hide' 
    ] 

Answer 3

だろうまあ、これは私がon this answerベースのトリックを、行う助けました。

は基本的に、私はスタイルでラッピングのdivを使用して終了：

<div style="pointer-events:none;"> ... </div> 

これは簡単にそれを直接解決し、そして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>'; 
?>