星期選擇器，將開始和結束日期填寫到兩個輸入中

Question

我在html中有兩個輸入字段，一個輸入開始日期，另一個輸入結束日期。 我的網絡應用程序背后有邏輯，將顯示兩個日期范圍內的任何約會。 無需用戶單擊兩個日期字段，而是在每個單獨的字段的兩個不同日歷選擇器中選擇開始日期和結束日期，我希望實現一個在開始日期輸入字段上方的星期選擇器，以便您選擇一個值得花費幾天的時間，而不僅僅是一天。 然后，當單擊星期時，我希望開始日期輸入字段顯示星期的開始日期，結束日期顯示星期的結束日期。

我已經上網，並在JSFiddle星期選擇器上查看了很多示例，但是當在選擇器中選擇了星期時，我似乎找不到自動填充2個輸入字段的示例。

有任何想法嗎？

謝謝

編輯：

周選擇器的腳本：

<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'); });
});

輸入欄位：

<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 1

我已經弄清楚如何使一個星期選擇器正常工作：

<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'); });
});

通過在開始日期和結束日期上使用+1和+5，可以選擇星期一-星期五。 如果您希望有周日至周六等，可以隨時更改這些設置。