需要動態量程的內容複製到輸入字段表單提交

我是新來&我是用JavaScript一noob，所以，請溫柔&詳細:-)需要動態量程的內容複製到輸入字段表單提交

我鉤住這個腳本（link）允許用戶從日曆中選擇整整一週。它完全按原樣工作，因爲它應該。

我的問題是，它將選定的星期結果作爲內聯內容放入SPAN標記中。我真的需要將結果放入FORM Hidden INPUT值中，以便它可以以自動形式提交。

我研究了&研究了整整兩天;閱讀儘可能多的關於jquery等，但我只是不「得到它」。

會真的很感謝一些幫助。謝謝！

<head> 

<script type="text/javascript"> 
$(function() { 
var startDate; 
var endDate; 

var selectCurrentWeek = function() { 
    window.setTimeout(function() { 
     $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active') 
    }, 1); 
} 

$('.week-picker').datepicker({ 
    dateFormat: 'yy-mm-dd', 
    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; 
     $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
     $('#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(); 
    } 
}); 

$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); 
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); 

}); 
</script> 

</head> 
<body> 

<div class="week-picker"></div> 
<p><label>Week :</label> 
<span id="startDate"></span> - <span id="endDate"></span> 

</body>

來源

2012-03-03 SyberKnight

這應該讓你開始。（或fiddle）

只需將類型更改爲隱藏，我只將其設置爲文本，以便您可以輕鬆地看到它正在工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> 
<script type="text/javascript"> 
$(function() { 
    var startDate; 
    var endDate; 

    var selectCurrentWeek = function() { 
     window.setTimeout(function() { 
      $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active') 
     }, 1); 
    } 

    $('.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; 
      $('#startDate').val($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
      $('#endDate').val($.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(); 
     } 
    }); 

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); 
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); 
}); 
</script> 
</head> 
<body> 
    <div class="week-picker"></div> 
    <br /><br /> 
    <form action="/somewhere"> 
    <label>Week :</label> <input type="text" id="startDate"></input> - <input type="text" id="endDate"></input> 
     <input type="submit" /> 
    </form> 
</body> 
</html>

來源

2012-03-03 22:51:02 Maran

謝謝謝謝謝謝謝謝!!!!你搖滾的男人！我真的很感謝這個調整。極大地幫助我！如果有什麼我可以爲你做的圖形（這是我更強大的西裝），請不要猶豫，問。和平：賈森。 – SyberKnight 2012-03-04 05:50:23

需要動態量程的內容複製到輸入字段表單提交

回答

相關問題