javascript - md-datepicker 给出空值

Question

我用 md-datepicker 创建了一个表单，所有表单输入都有价值，但 md-datepicker 没有。如何解决这个问题。这是我的带有 md-datepicker 的 html 表单输入：

<md-datepicker
name="date"
ng-model="date"
md-placeholder="Departure"
md-min-date="minDate"
></md-datepicker>

这是我的 javascript：

  angular.module('myBookApp', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope,$mdDialog) {
    $scope.date = new Date();
    $scope.minDate = new Date();
  });

谢谢你。

标签： javascriptangularjs

Answer 1

angular.module('demo',
    ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.data = {
    date: new Date()
  };
  $scope.minDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() - 2,
      $scope.myDate.getDate());

  $scope.maxDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() + 2,
      $scope.myDate.getDate());
      
$scope.submit = function() {
    $scope.data.dateString = moment($scope.data.date).format("YYYY-MM-DD");
    console.log($scope.data.dateString);
  }
 
});

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.2/angular-material.css" />
    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-messages.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.2/angular-material.js"></script>
   <script src="https://rawgit.com/angular/bower-angular-aria/v1.4.7/angular-aria.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<div ng-app="demo" ng-controller="AppCtrl" ng-cloak>
<form name="someForm">
    <div layout-gt-xs="row">
      <div flex-gt-xs>
        <h4>Date-picker with min date and max date</h4>
        <md-datepicker ng-model="myDate" md-placeholder="Enter date"
            md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
      </div>    
      </div>
       <md-button ng-click="submit()" class="md-primary" type="submit">Submit</md-button>
 </form>
 </div>