2つの入力に開始日と終了日を入力するウィークピッカー

Question

開始日と終了日の2つの入力フィールドがHTMLの1つにあります。私は2つの日付の範囲内の任意の予定が表示される私のWebアプリケーションの背後にあるロジックを持っています。ユーザーが両方の日付フィールドをクリックし、それぞれのフィールド上の2つの異なるカレンダー・ピッカーで開始日と終了日を選択する代わりに、開始日入力フィールドを超える週ピッカーを実装することを望んでいました。ただ1日ではなく、数週間の価値があります。週がクリックされると、開始日入力フィールドに週の開始日と終了日が表示され、週の終了日が表示されます。

週間ピッカーのJSFiddleでオンラインになって、かなりの例を見ましたが、ピッカーで週が選択されたときに2つの入力フィールドを自動入力するようには見えないようです。

アイデア？

おかげ

編集：1週間ピッカーのための

スクリプト：

<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

私はMAKする方法を考え出しました電子正しく動作週ピッカー：

<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を使用することにより - 金曜日が選択されています。これらは日曜日から土曜日などに変更したい場合にはいつでも変更することができます。