Question

我已经设置了一个自定义字段，用户可以在该字段中输入和输入日期，但是当它们不执行任何操作时。我的意思是它没有显示他们选择了什么日期，如果他们已经过验证并且没有被发送到服务器。服务器只获取自定义选项标记的值。

这是在浏览器上运行的代码片段：

$('#time').on('change', function(){
    if($(this).val() == 'custom'){
        $('#interval_selector').show();
        }
    else{
        $('#interval_selector').hide();
         }
 });

    $(function(){
        window.prettyPrint && prettyPrint();

        var startDate = new Date(2012,1,20);
        var endDate = new Date(2012,1,25);
        $('#dp4').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() > endDate.valueOf()){
                    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
                } else {
                    $('#alert').hide();
                    startDate = new Date(ev.date);
                    $('#startDate').text($('#dp4').data('date'));
                }
                $('#dp4').datepicker('hide');
            });
        $('#dp5').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() < startDate.valueOf()){
                    $('#alert').show().find('strong').text('The end date can not be less then the start date');
                } else {
                    $('#alert').hide();
                    endDate = new Date(ev.date);
                    $('#endDate').text($('#dp5').data('date'));
                }
                $('#dp5').datepicker('hide');
            });
    });

</script>

<div class="page-header">
   <h2 id="changer">Enter the Event you would like to follow:</h2>
 </div>


<style>
 #interval_selector{
  display:none;
  background:none;
   margin:10px;
 }
</style>

<div class="row">
<div class="span11">  
<form id ="eventForm">
     <select name="period" id="time">
        <option value="beginning" selected="selected">Process all Tweets from start</option>
        <option value="RealTime tweeting">Process all Tweets in real-time</option>
        <option value="the last 24 hours">Last 24 hours</option>
        <option value="the previous week">Previous week</option>
        <option value="custom">Custom</option> 
     </select>

    <input type="submit" id="open" onclick="heading()" value="Start Visualization" />

    <input type="button" onclick="closeMap()" value="Stop Request"/>

    <div id="interval_selector">
        <table class="table">
            <thead>
                <tr>
                    <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"> Change</a></th>
                    <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25"> Change</a></th>
                </tr>
               </thead>
               <tbody>
                <tr>
                    <td id="startDate "> 2012-02-20</td>
                    <td id="endDate "> 2012-02-25</td>
                </tr>
                </tbody>
            </table>
        </div>
    </form> 
</div>  


<div class="span1">
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post">
<input type="submit" value="Further Analysis">
</form>
</div>
</div>

那么如何让服务器接收选定的日期。

我基于Stafan Petre的eyecon.ro/bootstrap-datepicker示例基于datepicker。

由于

Answer 1

更改＃dp4和＃dp5以形成输入。

 <th>Start date<input id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20" /></th>
 <th>End date<input id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25" /> </th>

用户选择的html格式的日期未被服务器接收

1 个答案: