1

I'm able to highlight current date with 'todayHighlight' => true, but I want to highlight some other date.

Ankit Singh
  • 922
  • 9
  • 16
  • if you inspect the code you can see there is extra class `today` applied to the date , so its highlighted , you can add the same class to other date – Ash-b Jun 25 '18 at 10:53
  • Yep, that's okay. But now I have to find that element first. Inspect element is fine. But what if I want to add it through some jquery code. – Ankit Singh Jun 25 '18 at 12:58
  • The Kartik Datepicker is a wrapper for Bootstrap Datepicker, which does not provide a means to highlight specific dates, but it provides [daysOfWeekHighlighted](https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#daysofweekhighlighted) option for highlighting every instance of specific days, e.g. sarturdays and sundays. What exactly are you trying to achieve? – ajmedway Jun 25 '18 at 13:58
  • This has been asked here too: https://github.com/kartik-v/yii2-widget-datepicker/issues/33 – ajmedway Jun 25 '18 at 14:16
  • I have a pair of dates. Total there are 24 dates. And hence 12 pairs. On create action, I have filled out 1st date of all pairs. While update action, I want 1st date to be highlighted on 2nd date. – Ankit Singh Jun 25 '18 at 15:53

1 Answers1

1

You can use this function beforeShowDay as pluginOptions array key. Here is simple example:

<?= $form->field($model, 'myDate', ['showLabels' => false])->widget(DatePicker::className(), [
'size' => 'sm',
'type' => DatePicker::TYPE_INPUT,
'pluginOptions' => [
    'autoclose' => true,
    'format' => 'Y-m-d',
    'startDate' => date('Y-m-d'),
    'endDate' => date('Y-m-d', strtotime('-1 day')),
    'weekStart' => 1,
    'beforeShowDay' => new \yii\web\JsExpression("function (dates) {
        console.log(dates); // List with available dates as date object defined with startDate/endDate (for mor customisations if needed)

        return {classes: 'highlight', tooltip: 'Pick this day'};
        }
    }"),
]
]); ?>

Don't forget to define class (.highlight in this case) in your css.

.highlight{background: #ebf4f8}
atrichkov
  • 450
  • 3
  • 6