I am working on asp.net mvc. I am trying to show a datepicker in a web page, along with two buttons i.e. previous and next which are for navigating between weeks in datepicker. I am able to show datepicker and able to select total week dates based on user selected date, like

```
   $('#txtSrchFrom').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function (dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
            $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
            if (startDate.getMonth() == endDate.getMonth()) {
                $('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + endDate.getDate() + ", " + startDate.getFullYear());
            }
            else {
                $('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + getMonthName(endDate.getMonth()) + " " + endDate.getDate() + ", " + startDate.getFullYear());
            }
            selectCurrentWeek();
        },
        beforeShowDay: function (date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function (year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('#txtSrchFrom .ui-datepicker-calendar tr').live('mousemove', function () { $(this).find('td a').addClass('ui-state-hover'); });
    $('#txtSrchFrom .ui-datepicker-calendar tr').live('mouseleave', function () { $(this).find('td a').removeClass('ui-state-hover'); });

```

and here is my markup,

```
<input type="button" class="btn btn-info" value="<< Prev" />
<div class="input-group" style="width: 220px;">
    <input type="text" class="form-control" id="txtSrchFrom" name="txtSrchFrom" readonly="readonly" placeholder="Search by From Date" />
    <span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
<input type="button" class="btn btn-info" value="Next >>" onclick="return gotoNextweek();"/>
<br />
 <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>

```

Suppose I am currently in 1st week, and when i click on next button i need to switch to next week and all dates in that week needs to be selected. and previous button needs to work in a similar way. I have tried it by setting the endDate + 7 days to datepicker like,

```
function gotoNextweek() {
    var $picker = $("#txtSrchFrom");
    var date = new Date($picker.datepicker('getDate'));
    date.setDate(endDate.getDate() + 7);
    return false;
}

```

but it doesn't works for me. Please guide me, how to achieve this.