Date Range Hover Highlight

date-highlight

Basic Usage

1. Include jQuery javascript library and jQuery UI on your web page

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

2. The css

<style type="text/css">
	.dp-highlight .ui-state-default {
		background: #FAAE2A;
		color: #FFF;
	}
</style>

3. The html

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

4. The javascript

<script type="text/javascript">
    $(function() {
        dpmode='';
        var startDate='0';
        var endDate='0';
        $( "#from" ).datepicker({
            minDate: 0,
            dateFormat:"yy-mm-dd",
            changeMonth: true,
            numberOfMonths: 3,
            beforeShow:function(input, calendar){
                menuLocked=true;
                dpmode='depart';
            },
            beforeShowDay: function(date) {
                var date1 = $.datepicker.parseDate("yy-mm-dd", $("#from").val());
                var date2 = $.datepicker.parseDate("yy-mm-dd", $("#to").val());
                return [true, date1 && date2 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];

            },
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
                $('#to').datepicker('show');
                startDate = selectedDate;
            }
        });
        $( "#to" ).datepicker({
            dateFormat:"yy-mm-dd",
            minDate:2,
            setDate: new Date(),
            changeMonth: true,
            numberOfMonths: 3,
            beforeShow:function(){
                dpmode='return'; 
            },
            beforeShowDay: function(date) {
                var date1 = $.datepicker.parseDate("yy-mm-dd", $("#from").val());
                var date2 = $.datepicker.parseDate("yy-mm-dd", $("#to").val());
                return [true, date1 && date2 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
            },
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                endDate = selectedDate;
            }
        });

        $('#ui-datepicker-div').delegate('.ui-datepicker-calendar td', 'mouseover', function() {
            if ($(this).data('year')==undefined)return;
            if (dpmode=='depart' && endDate=='0')return;
            if (dpmode=='return' && startDate=='0')return;
            
            var currentDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html();
            currentDate = $.datepicker.parseDate("yy-mm-dd",currentDate).getTime();
            if (dpmode=='depart') {
                var StartDate = currentDate;
                var EndDate = $.datepicker.parseDate("yy-mm-dd",endDate).getTime(); 
            }else{
                var StartDate = $.datepicker.parseDate("yy-mm-dd",startDate).getTime();
                var EndDate = currentDate; 
            };
            $('#ui-datepicker-div td').each(function(index, el) {
                if ($(this).data('year')==undefined)return;

                var currentDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html();

                currentDate=$.datepicker.parseDate("yy-mm-dd",currentDate).getTime();
                if (currentDate >= StartDate && currentDate <= EndDate) {
                    $(this).addClass('dp-highlight')
                }else{
                    $(this).removeClass('dp-highlight')
                };
            });
        });
    });
</script>

2 thoughts on “Date Range Hover Highlight”

  1. Hi,
    Can you please tell me how to hide calendar by default and open only when click on input fields and how to add hover effect while selecting date from start to end date range.

    With Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.