CODEWITHSUNDEEP
javascriptjquerydatepickeryii2
MHogge
MHogge

Reputation: 5196

yii2 datepicker disable dates using javascript

I rewrited my question:

I'm using Kartick DatePicker to display a datepicker. On this datepicker, I want to disable dates using javascript. Here is what I have:

<?= DatePicker::widget([
    'name' => 'mydate',
          'language' => 'fr',
          'clientOptions' => [
              'autoclose' => true,
              'format' => 'dd-M-yyyy'
          ]
  ]);?>

With the JS:

 $(function(){
     $("#w0").datepicker("setDatesDisabled", ['25-08-2017']);
});

I tried to change the format of the date to 2017/08/25 or 08/25/2017 but in any case nothing is displayed into the logs.

I also tried to use kvDatepicker() instead of datepicker() but this gave me

Uncaught TypeError: $(...).kvDatepicker is not a function

Any clue on what is wrong here? Thank's.

Upvotes: 9

Views: 2034

Answers (2)

Yii2Developer
Yii2Developer

Reputation: 85

If you are using Yii2 Specifically than this may help you

    echo '<label id = "for-trigger">Date</label>';
                echo DatePicker::widget([
                    'type' => DatePicker::TYPE_INPUT,
                    'id' => 'anyUniqueID',
                    'name' => 'date',
                    'value' => '2020-04-11',
                    'options' => ['placeholder' => 'Selectdate ...'],
                    'pluginOptions' => [
                        'format' => 'yyyy-M-dd',
                        'daysOfWeekHighlighted' => '2,3',
                        'todayHighlight' => true,
                        'datesDisabled' => ['2020-04-06', '2020-04-21']
                    ],
                    'pluginEvents' => [
                        'changeDate' => "function(e) {  
                            //something you want to do may be 
                        }"
                    ]
                ]);

Upvotes: 0

K Scandrett
K Scandrett

Reputation: 16540

Your date is in the wrong format. It should be specified as:

$("#w0").datepicker("setDatesDisabled", ['08/25/2017']);

Of course make sure that w0 is the correct ID for the input element... it might also be that your selector doesn't match the input.

I've verified on the demo page that entering this in the browser's console correctly disables Aug 28:

$('#sandbox-container input').datepicker("setDatesDisabled", ['08/28/2017']);

Upvotes: 8

Related Questions