我不能让这个JFidddle代码在我的项目

时间:2015-11-23 23:03:06

标签: javascript

我是JavaScript的新手,我仍在学习代码。我想在项目中实现这个特定的JSFiddle代码(http://jsfiddle.net/MCzJ6/163/),但它无法正常工作。任何帮助都会非常感激。

<!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>

2 个答案:

答案 0 :(得分:-1)

    <!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>

脚本应该是正文或头部。在脚本的开头和函数之前还有一个分号,导致该异常。看到这个,它应该可以正常工作。

答案 1 :(得分:-1)

你有一些语法错误。请研究这个工作代码,看看你在哪里。你很亲密第一个应用程序的好尝试!

问题的一个好标题是例如在尝试使用Date计算器时出现语法错误,或类似的事情。

还要注意我是如何在Stack Overflow中放置一个“小提琴”(称为片段)。你也可以在这个问题中做到这一点。

$("#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>