如何「強制」krajee bootstrap daterangepicker爲只讀？

我正在使用krajee DatePicker。如何「強制」krajee bootstrap daterangepicker爲只讀？

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？（例如沒有懸停，沒有日期選擇）。我想在網頁上渲染它以通知用戶一個範圍，但用戶可以與它交互的事實在這種情況下感覺很尷尬。

來源

2016-04-28 Snivs

您給出了一個'DateRangePicker'的鏈接，但是在您的代碼中使用了'DatePicker'。你能否清楚，你正在使用哪一堂課？也許只是顯示你的'使用'部分 –

我的壞，我認爲使用daterangepicker，但最終使用datepicker ....我將編輯我的問題儘快 – Snivs

您可以嘗試添加「只讀」選項。就像這樣：

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

來源

2016-04-28 09:03:09 yikai

「只讀」屬性，只會使html文本輸入只讀，用戶是仍然能夠與日曆交互。 – Snivs

嘗試在您的選項數組屬性disabled中使用。所以它會是

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

來源

2016-04-28 17:32:24

這隻會使html輸入禁用，用戶仍然可以懸停並選擇日期：/ – Snivs

那麼，這幫助我做伎倆，基於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>'; 
?>

來源

2016-04-28 18:51:07 Snivs

如何「強制」krajee bootstrap daterangepicker爲只讀？

回答

相關問題