CODEWITHSUNDEEP
jqueryyiidatepickeryii2
ii--L--ii
ii--L--ii

Reputation: 207

Kartik Datepicker disabled dates lesser than startDate

I am using the DatePicker Widget - © Kartik - Krajee Yii Extensions for my date range.. Where I have a startDate and endDate. As you can see in the image below, I selected startDate: 2016-03-29 00:00.. How can I disabled the dates in my endDate datepicker based from my startDate.. Meaning all dates lesser than startDate will be disabled.

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>

Upvotes: 1

Views: 7531

Answers (3)

rebecca_blue
rebecca_blue

Reputation: 21

use postfixed selector, e.g. "#[your-selector]-kvdate" or "#[your-selector]-disp-kvdate"

try something like this:

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

Upvotes: 1

Andrea Perdicchia
Andrea Perdicchia

Reputation: 2786

for disable date you can use or 

          '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

Upvotes: 0

peaceman
peaceman

Reputation: 1721

There is an option for this:

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

it should work.

OK, I didn't understand the question. Add onSelect to #start:

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

I've tested this in jsfiddle so this should work for you. I'm unsure of the syntax but it should work... it did for me in Yii 1. If you want to limit endDate to not show dates previous to present which makes sense just add minDate option to it.

Upvotes: 0

Related Questions