title: Add event listener to a textbox initiated with datepicker
body: <p>I have two textboxes with <code>start_date</code> and <code>end_date</code> respectively.</p>
  
  <p>I am not able to <code>addEventListener</code> after it has been initiated with the datepicker else I am able to handle events on the textbox.
  below is my js code.</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded",function(){
                      //$("#start_date").datepicker();
                      $("#end_date").datepicker();
                      /*$('.d_picker').keydown(function (){
                         return false; 
                      });*/
                      var startDate = document.getElementById('start_date');
                      startDate.addEventListener('change',function (){
                          /*startDateVal = document.getElementById('start_date').value;
                          $("#end_date").datepicker("option","minDate",startDateVal);*/
                          console.log('Element '+this.name+' clicked');
                      },true);
  
                      var endDate = document.getElementById('end_date');
                      endDate.addEventListener('change',function (){
                          console.log('Element '+this.name+' clicked');
                      },true);
                  });
  </code></pre>
  
  <p>I get below as output in console:</p>
  
  <blockquote>
    <p>Element start_date clicked</p>
  </blockquote>
  
  <p>but end_date event is never triggered on change</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;event listeners in javascript&lt;/title&gt;
          &lt;link type="text/css" rel="stylesheet" href="assets/third_party_libs/jquery/jquery_ui/jquery-ui.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;Start Date&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="start_date" name="start_date" class="d_picker" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;End Date&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="end_date" name="end_date" class="d_picker" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;script src="assets/third_party_libs/jquery/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="assets/third_party_libs/jquery/jquery_ui/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              document.addEventListener("DOMContentLoaded",function(){
                  //$("#start_date").datepicker();
                  $("#end_date").datepicker();
                  /*$('.d_picker').keydown(function (){
                     return false; 
                  });*/
                  var startDate = document.getElementById('start_date');
                  startDate.addEventListener('change',function (){
                      /*startDateVal = document.getElementById('start_date').value;
                      $("#end_date").datepicker("option","minDate",startDateVal);*/
                      console.log('Element '+this.name+'clicked');
                  },true);
  
                  var endDate = document.getElementById('end_date');
                  endDate.addEventListener('change',function (){
                      console.log('Element '+this.name+'clicked');
                  },true);
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>