将开始和结束日期填入两个输入的星期选择器

Question

我的 html 中有两个输入字段，一个用于开始日期，另一个用于结束日期。我的网络应用程序背后有逻辑，即显示两个日期范围内的任何约会。而不是用户必须单击两个日期字段并在每个单独的字段上的两个不同的日历选择器中选择开始日期和结束日期，我希望实现一个将在开始日期输入字段上方的星期选择器，它允许您选择一个数周而不是一天。然后，当单击一周时，我希望开始日期输入字段显示一周的开始日期和显示一周结束日期的结束日期。

我一直在线并查看了很多关于 JSFiddle of week 选择器的示例，但我似乎找不到在选择器中选择一周时自动填充 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 来选择星期一 - 星期五。如果您希望在周日至周六等活动，这些可以随时更改。