JQuery UI datepicker highlight specific date that isn't a selected date

Question

I have 2 datepickers. One is a check in date. The other is a checkout date. I'm using Jquery because I use it in a different way for mobile, otherwise I would use the bootstrap datepicker because it offers this functionality already and I wouldn't have to code it myself.

What I'm doing: I'm using it with AngularJS and I have datepicker initializing in a directive. When the check-in field is selected, the checkout field opens up so the user can select a checkout date. The minDate (or checkin date) td all the way to the checkout date tds are highlighted so it looks like a date range picker without really being a date range picker. This enables the user to be able to change one of the dates without having to change the other. If that makes any sense. If not, I can elaborate more.

The problem/question: This may or may not be dumb question, but how do I get the checkout date to show on the checkin datepicker? Without using a date range picker? Essentially, I need to target or add a class to a date on the datepicker that isn't a minDate, or a maxDate, and hasn't been selected.

Can this be done with beforeShowDay?

Thanks in advance for your help.

Answer 1

Thanks @Bindrid for pointing me in the right direction. For those of you who might want to see what I did, here you go.

Inside angular Directive:

       function showCheckout () {
            var coFormated = new Date(scope.co);
            if (date.getTime() === coFormated.getTime()) {
                console.log(date);
                console.log(coFormated);
                return [true, "ui-state-highlight"];
            } else {
                return [true, '', ''];
            }
        }
        function startDatepicker () {
            element.datepicker({
                minDate: 0,
                numberOfMonths: numMonths,
                showOtherMonths: true,
                gotoCurrent: true,
                beforeShowDay: function(date) {
                    var coFormated = new Date(scope.co);
                    if (date.getTime() === coFormated.getTime()) {
                        return [true, "highlight_end"];
                    } else {
                        return [true, '', ''];
                    }
                },
                onSelect: function (date) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(new Date(date));
                    });
                }
            });
        }
        scope.$watch('co', (function (newValue) {
            startDatepicker();
            if (scope.ci) {
                $('.ci').datepicker("setDate", scope.ci );
            }
        }), true);