I can't get this JFidddle Code to work in my project

Question

I am new to JavaScript and still learning as I code. I want to implement this specific JSFiddle code (http://jsfiddle.net/MCzJ6/163/) in a project but It is not working. Any help would be very appreciative.

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<script type="text/javascript">
  ;(function($, window, document, undefined){
    $("#days").on("change", function(){
       var date = new Date($("#start_date").val()),
           days = parseInt($("#days").val(), 10);

        if(!isNaN(date.getTime())){
            date.setDate(date.getDate() + days);

            $("#end_date").val(date.toInputFormat());
        } else {
            alert("Invalid Date");  
        }
    });


    //From: http://stackoverflow.com/questions/3066586/get-string-in-yyyymmdd-format-from-js-date-object
    Date.prototype.toInputFormat = function() {
       var yyyy = this.getFullYear().toString();
       var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
       var dd  = this.getDate().toString();
       return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
    };
})(jQuery, this, document);</script>
<body>
    <input type="date" id="start_date" placeholder="Start Date"/>
<input type="number" id="days" min=0 placeholder="Days"/>
<input type="date" id="end_date" placeholder="End Date" readonly/></body>
</html>

Also, please see [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask). "Fix my code" is not a question and the wrong scope for stackoverflow. — Leon Adler, Nov 23 '15 at 23:10

score -1 · Answer 1 · answered Nov 23 '15 at 23:12

    <!doctype html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>


<script type="text/javascript">
      (function($, window, document, undefined){
        $("#days").on("change", function(){
           var date = new Date($("#start_date").val()),
               days = parseInt($("#days").val(), 10);

            if(!isNaN(date.getTime())){
                date.setDate(date.getDate() + days);

                $("#end_date").val(date.toInputFormat());
            } else {
                alert("Invalid Date");  
            }
        });


        //From: http://stackoverflow.com/questions/3066586/get-string-in-yyyymmdd-format-from-js-date-object
        Date.prototype.toInputFormat = function() {
           var yyyy = this.getFullYear().toString();
           var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
           var dd  = this.getDate().toString();
           return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
        };
    })(jQuery, this, document);
</script>




    </head>
    <body>
        <input type="date" id="start_date" placeholder="Start Date"/>
    <input type="number" id="days" min=0 placeholder="Days"/>
    <input type="date" id="end_date" placeholder="End Date" readonly/></body>
    </html>

Script should be either in body or in head section. Also there is a semicolon at the starting of script and before function which is causing that exception. See this and it should work fine.

toddmo · Answer 2 · 2015-11-23T23:21:24.350

-1

You had a few syntax errors. Please study this working code to see where you were off. You were close. Good try for a first app!

A good title to a question is for example syntax error when trying to get Date calculator working, or something like that.

Also notice how I've put a "fiddle" (called a snippet) right here in Stack Overflow. You can do that in the question as well.

$("#days").on("change", function() {
  var date = new Date($("#start_date").val()),
    days = parseInt($("#days").val(), 10);

  if (!isNaN(date.getTime())) {
    date.setDate(date.getDate() + days);

    $("#end_date").val(date.toInputFormat());
  } else {
    alert("Invalid Date");
  }
});


//From: http://stackoverflow.com/questions/3066586/get-string-in-yyyymmdd-format-from-js-date-object
Date.prototype.toInputFormat = function() {
  var yyyy = this.getFullYear().toString();
  var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
  var dd = this.getDate().toString();
  return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]); // padding
};

<!doctype html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>
  <input type="date" id="start_date" placeholder="Start Date" />
  <input type="number" id="days" min=0 placeholder="Days" />
  <input type="date" id="end_date" placeholder="End Date" readonly/>
</body>

</html>

edited Nov 23 '15 at 23:21

answered Nov 23 '15 at 23:15

toddmo

20,682
14
97
107

Where are the syntax errors? Do you mean the position of the ` – Sebastian Simon Nov 23 '15 at 23:27
@Xufox, I want him to compare this with his code and find out, as a learning exercise. – toddmo Nov 23 '15 at 23:29
But the JS codes are identical except for indentation and spacing and the ` – Sebastian Simon Nov 23 '15 at 23:30
Works perfect thanks :). I will take comments into further posts – Ramos Alcarez Jr Nov 23 '15 at 23:38
@RamosAlcarezJr, you are going to be a good programmer. Very impressive first try! – toddmo Nov 23 '15 at 23:39
You replaced AngularJS with jQuery? – Sebastian Simon Nov 23 '15 at 23:41
@Xufox, it didn't work with angular, but it works with jquery. – toddmo Nov 23 '15 at 23:44

I can't get this JFidddle Code to work in my project

2 Answers2