Highlight selected daterange in jQuery UI datepicker

I have 2 jQuery UI datepickers on the same page which define a date range. I need to highlight the days between the 2 selected days. Let's say the first selected date is January the 1st and the second is January the 3r开发者_运维知识库d, I need to highlight January 1st, January 2nd and January 3rd. Could anybody tell me how this can be done?

Thanks in advance.

In example below we have two date input[type=text] (future datepickers) with IDs "inputStartDate" and "inputEndDate" placed inside the DIV with class="choose-date-block". We define limits with "minDate"/"maxDate" parameters during date pickers initialization.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        // select both inputs inside "choose-date-block"
        // to make datepickers from them
        $("div.choose-date-block input:text").datepicker({
            dateFormat: "yy-mm-dd",
            showAnim: "slideDown",
            hideIfNoPrevNext: "true",
            beforeShow: function(input) {
                return {
                    minDate:
                        input.id == "inputEndDate"
                            ? $("#inputStartDate").datepicker("getDate")
                            : null,
                    maxDate:
                        input.id == "inputStartDate"
                            ? ($("#inputEndDate").datepicker("getDate") != null)
                                ? $("#inputEndDate").datepicker("getDate")
                                : "+0d"
                            : "+0d"
                };
            },
            onSelect: function(dateText, inst) {
                if (dateText.length > 0)
                    ajaxRequestToReloadReportForNewDatesRegion();
            }
        })
    });
</script>

Try this

Jquery Date Range

Just use a brighter theme , i mean jquery if u go for that, so automatically days will be highlighted