Mojo Jojo Mojo Jojo - 1 month ago 15
Javascript Question

Week picker that fills in start and end date into two inputs

I have two input fields in my html one for the start date and the other the end date. I have logic behind my web app that any appointment within the range of the two dates will be displayed. Instead of the user having to click both date fields and selecting the start date and end date in two different calendar pickers over each individual field I was hoping to implement a week picker that will be over the start date input field which allows you to select a weeks worth of days instead of just a single day. Then when the week is clicked I would like the start date input field to display the start date of the week and the end date displaying the end date of the week.

I have been online and looked at quite a few examples on JSFiddle of week pickers but I can't seem to find one that auto fills 2 input fields when the week is selected in the picker.

Any ideas?

Thanks

Edit:

Script for week picker:

<script>
jQuery(function(){
initsetup("FORM_R06630");
jQuery("#search_input").hide();
setAsmSelect();
setRuntimeSelect();
});
jQuery(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
jQuery('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
jQuery('.week-picker').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;
jQuery('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
jQuery('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
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();
}
});
jQuery('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
jQuery('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});




Input fields:

<tr>
<td class="ten td_left"><strong>START DATE </strong> Is in the range</td>
<td align="left" class="ten">from
<input class="mrcinput week-picker" id="R001" name="R001" size="8" title="R001" type="text" value="${select.R001}" /> to
<input class="mrcinput" id="S001" name="R001" size="8" title="S001" type="text" value="${select.S001}" /> <font color="red" id="msgR001">${select.errMsg_R001}</font></td>
</tr>

Answer

I have figured out how to make a week picker that works correctly:

<tr>
                    <td class="ten td_left"><strong>START DATE </strong> Is in the range</td>
                    <td align="left" class="ten">from 
<input class="mrcinput startDate" id="R001" name="R001" size="8" title="R001" type="text" value="${select.R001}" /> to
<input class="mrcinput endDate" id="S001" name="R001" size="8" title="S001" type="text" value="${select.S001}" /> 
<font color="red" id="msgR001">${select.errMsg_R001}</font></td>
</tr>

jQuery

jQuery(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
    window.setTimeout(function () {
        jQuery('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
}
jQuery('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function(dateText, inst) {
        var date = jQuery(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
        var dateFormat = inst.settings.dateFormat || jQuery.datepicker._defaults.dateFormat;
        jQuery('.startDate').val(jQuery.datepicker.formatDate( 'yymmdd', startDate, inst.settings ));
        jQuery('.endDate').val(jQuery.datepicker.formatDate( 'yymmdd', endDate, inst.settings ));
        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();
    }
});
jQuery('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { jQuery(this).find('td a').addClass('ui-state-hover'); });
jQuery('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { jQuery(this).find('td a').removeClass('ui-state-hover'); });
});

By using +1 and +5 on the start date and end date Monday - Friday is selected. These can always be changed if you wish to have Sunday-Saturday etc.

Comments