需要动态量程的内容复制到输入字段表单提交

我是新来&我是用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

需要动态量程的内容复制到输入字段表单提交

回答

相关问题