Question

I’ve set up a custom field where users can enter to and from dates but when they do nothing happens. I mean by that it isn’t displayed what dates they have selected, if they have been validated and they are not sent to the server. The server just gets the value of the custom option tag only.

This is the code fragment running on the browser:

$('#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>  

So how can I get the server to receive the selected dates.

I’ve based the datepicker on based on Stafan Petre’s eyecon.ro/bootstrap-datepicker example.

Thanks

Answer 1

Change #dp4 and #dp5 to form inputs.

 <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>