title: Script running in JSfiddle but not on browser
body: <p>I have a script on JSfiddle that works: It lets users select a date and from a dropdown menu and if they choose 'custom' it displays some calendar options. Otherwise it remains hidden. But on my browser when I try to run the same script and I choose 'custom' that calendar is not displayed. This is the like to the JSfiddle: <a href="http://jsfiddle.net/MgcDU/330/" rel="nofollow">http://jsfiddle.net/MgcDU/330/</a></p>
  
  <p>This is the code fragment running on the browser:</p>
  
  <pre><code>$('#time').on('change', function(){
      if($(this).val() == 'custom'){
          $('#interval_selector').show();
          }
      else{
          $('#interval_selector').hide();
           }
   });
  
      $(function(){
          window.prettyPrint &amp;&amp; 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() &gt; 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() &lt; 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');
              });
      });
  
  &lt;/script&gt;
  
  &lt;div class="page-header"&gt;
     &lt;h2 id="changer"&gt;Enter the Event you would like to follow:&lt;/h2&gt;
   &lt;/div&gt;
  
  
  &lt;style&gt;
   #interval_selector{
    display:none;
    background:none;
     margin:10px;
   }
  &lt;/style&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="span11"&gt;  
  &lt;form id ="eventForm"&gt;
       &lt;select name="period" id="time"&gt;
          &lt;option value="beginning" selected="selected"&gt;Process all Tweets from start&lt;/option&gt;
          &lt;option value="RealTime tweeting"&gt;Process all Tweets in real-time&lt;/option&gt;
          &lt;option value="the last 24 hours"&gt;Last 24 hours&lt;/option&gt;
          &lt;option value="the previous week"&gt;Previous week&lt;/option&gt;
          &lt;option value="custom"&gt;Custom&lt;/option&gt; 
       &lt;/select&gt;
  
      &lt;input type="submit" id="open" onclick="heading()" value="Start Visualization" /&gt;
  
      &lt;input type="button" onclick="closeMap()" value="Stop Request"/&gt;
  
      &lt;div id="interval_selector"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Start date&lt;a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"&gt; Change&lt;/a&gt;&lt;/th&gt;
                      &lt;th&gt;End date&lt;a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25"&gt; Change&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                 &lt;/thead&gt;
                 &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td id="startDate "&gt; 2012-02-20&lt;/td&gt;
                      &lt;td id="endDate "&gt; 2012-02-25&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/form&gt; 
  &lt;/div&gt;  
  
  
  &lt;div class="span1"&gt;
  &lt;form name="moreAnalysis" id="moreAnalysis" action="/p" method="post"&gt;
  &lt;input type="submit" value="Further Analysis"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>I've based the datepicker on based on Stafan Petre's eyecon.ro/bootstrap-datepicker example.</p>
  
  <p>I can't see what I'm doing wrong.</p>
  
  <p>Thanks</p>