Datepicker Jquery UI

Datepicker for multiple inputs

$(".datepicker").datepicker({
    dateFormat: "dd/mm/yy",
    minDate: 0,
});

                

Datepicker on Modal Bootstrap

$('.datepicker').each(function (key, item) {
    var dateIdName = 'datepicker_0' + key;

    this.id = dateIdName;
    $('.datepicker')[key].id = dateIdName;

    var datepickerId = '#' + dateIdName;

    $(datepickerId).datepicker(
        {
            minDate: 0,
            dateFormat: "dd/mm/yy",
            beforeShow: function (input, inst) {
                var rect = input.getBoundingClientRect();
                setTimeout(function () {
                    inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
                }, 0);
            }
        }
    );
})

                

How to display events for a day in jquery datepicker Link Source link tham khảo

// Css Datepicker
.ui-datepicker {
    td {
        &.blue {
            a {
                background-color: $color_primary;
                color: #fff;
            }
        }

        &.red {
            a {
                background-color: $color_red;
                color: #fff;
            }
        }
    }
}

                

// Datepicker Check Rooom
var events = [
    {
        Date: new Date("02/24/2023"),
        text: "Evento 1",
        className: 'blue'
    },
    {
        Date: new Date("03/10/2023"),
        text: "Hết Phòng",
        className: 'red'
    },
    {
        Date: new Date("03/11/2023"),
        text: "Hết Phòng",
        className: 'red'
    },
    {
        Date: new Date("03/12/2023"),
        text: "Hết Phòng",
        className: 'red'
    },
]

$("#datepicker-check-rooom").datepicker({
    // defaultDate: "02/28/2023",
    // changeMonth: true,
    // changeYear: true, 
    numberOfMonths: 2,

    beforeShowDay: function (date) {
        var result = [true, "", null];
        var matching = $.grep(events, function (event) {
            return event.Date.valueOf() === date.valueOf();
        });
        if (matching.length) {
            result = [true, matching[0].className, matching[0].text];
        }
        return result;
    }
});