jQuery Datepicker mark range

2
votes

I have two datepickers applied to a div on my website to implement a date range. Now I want to highlight all dates in the calendar, which are in the selected range (e.g. applying a css class on them).

I found this: Select a Range of dates and Highlight in jQuery Datepicker

But how can I insert all selected days in an array? Or is there even a better solution?

How can I manage this? I couldn't find a built-in solution of the datepicker plugin.

2
jquerydatepicker

2 Answers

1
votes

This is a old one but I needed the same functionality so here is how I did it in case someone needs it.

jQuery(document).ready(function(){

jQuery( "#start_date" ).datepicker({
    dateFormat:'yy-mm-dd',
    changeMonth: true,
    numberOfMonths: 3,
    rangeSelect:true,
    beforeShowDay: customRange,
    onClose: function( selectedDate ) {
        jQuery( "#end_date" ).datepicker( "option", "minDate", selectedDate );
    }
});
jQuery( "#end_date" ).datepicker({
    dateFormat:'yy-mm-dd',
    changeMonth: true,
    numberOfMonths: 3,
    rangeSelect:true,
    beforeShowDay: customRange,
    onClose: function( selectedDate ) {
        jQuery( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
    }
});
});
function customRange(date) {
    if(date >= jQuery('#start_date').datepicker('getDate') && date <= jQuery('#end_date').datepicker('getDate')) {
        return [true, 'highlight'];
    } else {
        return [true, ''];
    }
}
0
votes

Try this

<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript">
$(function(){
    $("#to").datepicker();
    $("#from").datepicker().bind("change",function(){
        var minValue = $(this).val();
        minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
        minValue.setDate(minValue.getDate()+1);
        $("#to").datepicker( "option", "minDate", minValue );
    })
});
</script>

Example : http://jsfiddle.net/dW4n8/2/

$("#input-service_date_leave, #input-service_date_return").datepicker({
        rangeSelect: true,
        beforeShow: customRange,
        onSelect: customRange,
    });

function customRange(input) {
    if (input.id == "input-service_date_leave") {

        $("#ui-datepicker-div td").die();

        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
    if (input.id == "input-service_date_return") {

        $("#ui-datepicker-div td").live({
            mouseenter: function() {
                $(this).parent().addClass("finalRow");
                $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
           },
            mouseleave: function() {
                $(this).parent().removeClass("finalRow");
                $("#ui-datepicker-div td").removeClass("highlight");
            }
        });

        var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
}