Question

I am having two text fields From, To.Here i want to do many things with is two fields.

1. I want to select next three days on selected date.Which means,if I am selecting jan 1,2012 in From field , then To field should automatically select jan 1,2,3 2012.
2. While I am hover on jan 1, It should highlight jan 1,2,3
3. While I am selecting on jan 1 it should it disable after 10 days (after jan 10 all dates should disabled)
4. Suppose I disabled jan 2 means.While I am selecting jan 1 tool tip message should say you can’t select these dates.

Give me the reference idea which functions are used to do this.If you have example code for any of these please share.It will be very help full.

This is my setup

var dates = jQuery("#From,#To").datepicker({
    beforeShowDay: excludeDates,
    showButtonPanel: true,
    dateFormat: "m/d/y",
    altFormat: 'yy-mm-dd',
    minDate: 0,
    onSelect: function(selectedDate, inst) {
        var option = this.id == "From" ? "minDate" : "maxDate",
            instance = jQuery(this).data("datepicker"),
            date = jQuery.datepicker.parseDate(instance.settings.dateFormat || jQuery.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);

        var d = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        var mydate = jQuery.datepicker.formatDate('yy-mm-dd', d);





    }
});

Thanks in advance

Answer 1

It’s not a complete answer but I’ve hacked something together which should hopefully get you started. It meets some of your requirements but the hover highlighting is not perfect (sometimes extra dates are left highlighted) and I’m not happy with all of the JavaScript Date objects so there is probably some optimisation to be done. The code is included below:

HTML

From:<div id="fromDate"></div>
To:<div id="toDate"></div>

CSS

body {
    margin:10px 0 0 5px;
    font-family:Verdana;
    font-size:.8em;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #743620 none; /* a color that fits the widget theme */
    color: white; /* a color that is readeable with the color above */
}

JavaScript

$('#fromDate').datepicker({
    onSelect: function(dateText, inst) {
        // set range <selected, +10d> on toDate
        var minDate = $(this).datepicker('getDate');
        var maxDate = new Date(minDate);
        maxDate.setDate(maxDate.getDate() + 9);

        var plusOne = new Date(minDate);
        plusOne.setDate(minDate.getDate() + 1);
        var plusTwo = new Date(minDate);
        plusTwo.setDate(minDate.getDate() + 2);
        var nowPlusThree = [minDate, plusOne, plusTwo];

        $('#toDate').datepicker('destroy').multiDatesPicker({minDate: minDate, maxDate:maxDate, 'addDates': nowPlusThree});

        $('#fromDate').off('hover', 'a');
    }
});

$('#toDate').datepicker();

$('#fromDate').on('hover', 'a', function() {
    var hoveredDate = new Date($('#fromDate .ui-datepicker-month').text() + ' ' + $(this).text() + ' ' + $('#fromDate .ui-datepicker-year').text());

    var plusOne = new Date(hoveredDate);
    plusOne.setDate(hoveredDate.getDate() + 1);
    var plusTwo = new Date(hoveredDate);
    plusTwo.setDate(hoveredDate.getDate() + 2);
    var nowPlusThree = [hoveredDate, plusOne, plusTwo];

    var existingDates = $('#toDate').multiDatesPicker('getDates');
    $('#toDate').multiDatesPicker('removeDates', existingDates);
    $('#toDate').multiDatesPicker({'addDates': nowPlusThree});
});

Note that the demo jsFiddle also includes a jQueryUI Theme and the Multiple Dates Picker plugin as advised by @diEcho