Kartik Datepicker禁用日期小于startDate

时间:2016-03-29 08:52:14

标签: jquery yii datepicker yii2

我正在使用DatePicker Widget - ©Kartik - Krajee Yii Extensions用于我的日期范围..我有一个startDate和endDate。如下图所示,我选择了startDate:2016-03-29 00:00 ..如何根据我的startDate禁用endDate datepicker中的日期..意味着将禁用比startDate小的所有日期。< / p>

enter image description here

<div class="form-control-datepicker">
<?php
echo DateTimePicker::widget([
    'name' => 'start',
    'id' => 'start',
    'value' => $start,
    'type' => DateTimePicker::TYPE_INPUT,
    'pickerButton' => ['icon' => 'time'],
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'yyyy/mm/dd HH:ii',
    ]
]);
?>
</div>
~
<div class="form-control-datepicker">
 <?php
    echo DateTimePicker::widget([
    'name' => 'end',
    'id' => 'end',
    'value' => $end,
    'type' => DateTimePicker::TYPE_INPUT,
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'yyyy/mm/dd HH:ii',
    ]
]);
?>
</div>

2 个答案:

答案 0 :(得分:0)

您可以使用的禁用日期 或

          'pluginOptions'=>[
                'locale'=>['format' => 'Y-m-d'],
                'minDate'=> "2017-05-12",
                'isInvalidDate' => new \yii\web\JsExpression(
                    "function(date){
                        var some_date_range = [ '2017-05-22', ];
                        for(var ii = 0; ii < some_date_range.length; ii++){
                            if (date.format('YYYY-MM-DD') == some_date_range[ii]){
                                return true;
                            }
                        }
                }"),
            ]

最低日期会停用2017-05-12的所有日期,并且InvalidDate会禁用范围日期

答案 1 :(得分:-1)

有一个选项:

'pluginOptions' => [
    'startDate' => date('Y-m-d'),
    'autoclose'=>true,
    'format' => 'yyyy/mm/dd HH:ii',
]

它应该有用。

好的,我没理解这个问题。将onSelect添加到#start:

    'pickerButton'=>['icon'=>'time'],
    'onSelect'=> 'js:function(date){
        var endDate = new Date(date);
        $("#end").datepicker( "option", "minDate", endDate );
        }',
    'pluginOptions'=>[ whatever ... ],

我已经在jsfiddle测试了这个,所以这对你有用。我不确定语法,但它应该有效...它在Yii 1中为我做了。如果你想限制endDate不显示当前的日期,这有意义只需添加minDate选项。