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中使用。那就是

  '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>';
?>

如何＆＃34;强迫＆＃34;一个krajee bootstrap daterangepicker是readonly？

3 个答案: