title: bootstrap datepicker and local storage
body: <p>I would like the user to select a date from a bootstrap datepicker component and store the selected value in local storage. When the user has completed their selection they can select the button whereupon an ajax call will use the local storage.</p>
  
  <p>At this moment I'm having trouble getting the datepicker component to set a value in the local storage. The date picker component renders when the user selects is and the user's selection becomes the value of the input field.</p>
  
  <p>Here is the mark up:</p>
  
  <pre><code>&lt;form&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="edge-name" class"control-label"&gt;Start:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="filterStart"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the javascript</p>
  
  <pre><code>$(document).ready(function(){
      $('#filterStart').datepicker();
      $('#filterStart').on('changeDate' function(){
          var newValue = $('#filterStart').datepicker('getFormattedDate')
          localStorage.setItem('filterStart',newValue);
          });
  </code></pre>
  
  <p>I've inserted console.log in various places throughout the javascript but the code never writes to the console therefore I know that its not writing to the local storage. I know that the local storage is working because I'm using it other parts of the code.</p>
  
  <p>Also, any suggestions on how to do this better would be greatly appreciated. </p>