Angularjs：使用ngmodel的angularjs输入中的日期时间返回未定义答案

【问题标题】：Angularjs : Date type in angularjs input using ng-model returns undifinedAngularjs：使用ngmodel的angularjs输入中的日期时间返回未定义
【发布时间】：2017-02-02 10:03:57
【问题描述】：

大家好，我在使用日期类型和 ng-model 时遇到了一些问题。在我的 index.html 中，我有这样的输入字段：

<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

和我的控制器：

$scope.myExample = function() {
    console.debug('date : ', $scope.myData.date);
}

在我的控制台中，我得到日志“日期：未定义”

为什么我有未定义的价值似乎是什么问题？谢谢

顺便说一句，我正在使用“bootstrap-datepicker”

【问题讨论】：

您是否选择了日期并单击了输入。因为它在我的浏览器中运行良好。
是的，已经选择了一个日期。但是当我点击 btn 时，它总是未定义
你在使用contoller作为语法吗？
是的。当我尝试将类型更改为文本时，我得到了日期，但它不是日期格式
您是否使用任何日期选择器，如何在文本框中获取日期，除非您使用选择器。

标签： javascript angularjs

【解决方案1】：

你必须初始化你的 myData 对象

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = {}; //Create the object 
  $scope.myExample = function() {
    console.log('date : ', $scope.myData.date);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <input class="form-control" type="date" id="date" ng-model="myData.date" />
  <button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

</div>

【讨论】：

hmm.. 你用什么日期选择器？
我只是复制了你的代码，我没有使用任何外部库。这是默认的日期选择器
所以我认为问题出在我的日期选择器上。因为我尝试了你的建议，但仍然得到未定义的数据
$scope.myData 中保存了什么？那也是未定义的吗？
yhup undefined 但是当我将类型更改为文本时，它会给出字符串日期格式

【解决方案2】：

这是使用 bootstrap-datepicker

所需的解决方案

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myData = {}
    $scope.myData.date = new Date();
    $scope.myExample = function() {
     console.debug('date : ', $scope.myData.date);
      console.log('date : ', $scope.myData.date);
    }

});

<html>
<script src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>



<body>
<script>
$('#date').datepicker() 
</script>
<div ng-app="myApp" ng-controller="myCtrl">

<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

</div>

</body>
</html>

请运行上面的sn-p

HERE IS A WORKING DEMO

【讨论】：

@Arnold，请检查这个答案。

【解决方案3】：

另一种解决方案是通过您的函数传递日期值。

这就是我实现这一目标的方式。

代码：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body ng-controller="myController">
    <input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample(myData.date)">Submit</button>
<script>

  angular.module("myApp",[])
  .controller("myController",function($scope){
    $scope.myExample = function(date) {
      console.log(date);
    alert(date);
}

  })
</script>
  </body>

</html>

您还可以使用 angularjs 中提供的日期过滤器。在此处查看文档 https://docs.angularjs.org/api/ng/filter/date

【讨论】：