Untitled

<html>
    <head>
        <title>event listeners in javascript</title>
        <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    </head>
    <body>
        <table>
            <tr>
                <td>Start Date</td>
                <td><input type="text" id="start_date" name="start_date" class="d_picker" /></td>
            </tr>
            <tr>
                <td>End Date</td>
                <td><input type="text" id="end_date" name="end_date" class="d_picker" /></td>
            </tr>
        </table>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript">
            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);
            });
        </script>
    </body>
</html>