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

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

本文关键字:日期 输入 两个 选择器 开始 结束      更新时间:2023-09-26

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

我在网上看了很多关于星期选择器的例子,但我似乎找不到一个在星期选择器中选择时自动填充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>

我已经弄清楚如何使一周选择器正确工作:

<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来选择星期一到星期五。如果你想要周日或周六等,这些都可以更改。