Kartik Datepicker 禁用日期小于开始日期答案

【问题标题】：Kartik Datepicker disabled dates lesser than startDateKartik Datepicker 禁用日期小于开始日期
【发布时间】：2016-07-16 17:30:45
【问题描述】：

我正在使用 DatePicker 小部件 - © Kartik - Krajee Yii Extensions 用于我的日期范围。我有一个 startDate 和 endDate。如下图所示，我选择了 startDate: 2016-03-29 00:00 .. 如何根据 startDate 禁用 endDate 日期选择器中的日期。这意味着所有小于 startDate 的日期都将被禁用。

<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>

【问题讨论】：

标签： jquery yii datepicker yii2

【解决方案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 选项。

【讨论】：

'startDate' => date('Y-m-d')，仅在您想禁用今天之前的日期时才有效。我试图实现的是，当用户在 startDate 中选择一个日期，然后在 endDate 日期选择器中选择一个日期时，它将禁用所选 startDate 之前的日期。

【解决方案2】：

对于禁用日期，您可以使用或

          '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;
                            }
                        }
                }"),
            ]

Min date disable all dates minor of 2017-05-12 and is InvalidDate disable a range date

【讨论】：

【解决方案3】：

使用后缀选择器，例如"#[your-selector]-kvdate" 或 "#[your-selector]-disp-kvdate"

试试这样的：

'pluginEvents' =>[
    "changeDate" => "function(e) {
          $('#end').val('');
          $('#end-disp-kvdate').kvDatepicker('update', '');
          $('#end-disp-kvdate').kvDatepicker('setStartDate', new Date(e.date));
    }",
]

【讨论】：