JavaScript

I am a novice to JavaScript and am trying to learn it out. I am struck with the automatic calculation of days and automatic insertion of month, calendar week based on the user entered data.

I searched and I got to calculate the differences only by static not by the user entered dates. Can anyone help me out here please.

I have 6 Text boxes.

In 1st textbox "Year" user enters a specific date (dd.mm.yy) 
2nd text box needs to be automatically filled with the respective calendar week 
3rd text box needs to be automatically filled with the respective month (Jan, Feb, Mar)
4th text box needs to be automatically filled with the respective year

5th text box user enters another date (dd.mm.yy)
6th text box needs to be automatically filled with the number of days difference between 2nd entered date and first entered date.

My code is as below.

$(function() { 
$( "#datepicker").datepicker({ dateFormat: 'dd.mm.yy' }); 
$("#datepickerend").datepicker({ dateFormat: 'dd.mm.yy'});
  
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
<table border="0">
<tr>
<td>Date: <input type=text name="date" id="datepicker"></td>
</tr>
<tr>
<td>CW: <input type=text name="CW"></td>
</tr>
<tr>
<td>Month: <input type=text name="Month"></td>
</tr>
<tr>
<td>Year: <input type=text name="Year"></td>
</tr>
<tr>
<td>Ending Date: <input type=text name="enddate" id="datepickerend"></td>
</tr>
<tr>
<td>Days: <input type=text name="days"></td>
</tr>
</table>
</div>

<pre lang="text">:

    <!--RoboAuditor embed code start--><center><div id="roboaudit"></div></center><script  id="growthrobo" src="https://245.growthrobotics.com/assets/site/js/sitecheck.js" data-content="245"></script><!--RoboAuditor embed code end-->

<pre>        <script type="text/javascript">

            function OnClientFileSelected(sender, args) {
                if ($telerik.isIE9 || $telerik.isIE8 || $telerik.isIE7) {
                    var input = args.get_fileInputField();
                    if (sender.isExtensionValid(input.value)) {
                        var img = document.createElement("img");
                        var thumbnail = document.getElementById("thumbnail");
                        thumbnail.appendChild(img);
                        if (img) {
                            img.style.visibility = "";
                            img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = input.value;
                        }
                    }
                }
                else {
                    var file = args.get_fileInputField().files.item(args.get_rowIndex()),
                        index = 0;
                    while (!file) {
                        file = args.get_fileInputField().files.item(index);
                        index++;
                    }
                    var $row = $telerik.$(args.get_row());
                    showThumbnail(file, $row);
                    
                }

            }


            function showThumbnail(file, row) {

                var image = document.createElement("img"),
                    thumbnail = document.getElementById(row.context.id),
                    breakLine = document.createElement("br");
                image.file = file;
                thumbnail.appendChild(breakLine);
                thumbnail.appendChild(image);

                var reader = new FileReader()
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                    };
                }(image))
                var ret = reader.readAsDataURL(file),
                    canvas = document.createElement("canvas");

                ctx = canvas.getContext("2d");
                image.onload = function () {
                    ctx.drawImage(image, 10, 10, 150, 180);
                }

                if (image.naturalWidth > image.naturalHeight) {
                    if (image.naturalWidth > MAX_WIDTH) {
                        height *= MAX_WIDTH / image.naturalWidth;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (image.naturalHeight > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / image.naturalHeight;
                        height = MAX_HEIGHT;
                    }
                }

                var MAX_WIDTH = 800,
                    MAX_HEIGHT = 600,
                    width = image.naturalWidth,
                    height = image.naturalHeight;

                canvas.width = width;
                canvas.height = height;
              

                var dataurl = canvas.toDataURL("image/png");
            }

        </script>