設置選擇選項

我想達到什麼範圍內自定義日期：
在選擇，我希望能夠選擇的開始日期和結束日期，當我點擊「應用」按鈕，我想記錄startDate和endDate的值以計算所選月份的數量。此值需要傳遞到NG-模式 'monthLimit'設置選擇選項

的script.js

var app = angular.module('plunker', ['angularjs-datetime-picker', 'ngMaterial']); 

app.controller('MainCtrl', function($scope) { 
    $scope.monthLimit = 'Test'; 
    $scope.startDate = '2016-03-02'; 
    $scope.endDate = '2016-03-10'; 
$scope.monthLimitChanged = function(){ 
    if ($scope.monthLimit == 'Custom'){ 
    console.log('start date', $scope.startDate); 
    console.log('end date', $scope.endDate); 
    } 
    $scope.showReport(); // calls a method that triggers a 
    // http request and pass in the required params 
} 
});

的index.html

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

    <head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css"> 
    <link rel="stylesheet" href="http://cdn.rawgit.com/kineticsocial/angularjs-datetime-picker/master/angularjs-datetime-picker.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script> 
    <script src="http://cdn.rawgit.com/kineticsocial/angularjs-datetime-picker/master/angularjs-datetime-picker.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <md-select 
     ng-model="monthLimit" 
     ng-change="monthLimitChanged()"> 
     <md-option value="Test">Test</md-option> 
     <md-option value="Custom"> 
      Custom 
      <div style="display:inline-block;"> 
       <input style="width:90px;" datetime-picker date-format="yyyy-MM-dd" date-only required ng-model="startDate" /> - 
      </div> 
      <div style="display:inline-block;"> 
       <input style="width:90px;" datetime-picker date-format="yyyy-MM-dd" date-only required ng-model="endDate" /> 
      </div> 
      <button ng-click="monthLimitChanged()" style="display:inline-block;">Apply</button> 
     </md-option> 
     </md-select> 
    </body> 

</html>

的style.css

md-select{ 
    padding: 30px; 
    width: 250px; 
} 

md-option:hover{ 
    background-color: #eee; 
}

Plunker
http://plnkr.co/edit/z4j3PKkEuKh4rd6u3dDG?p=preview

來源

2016-05-12 absingharora

您可以使用moment.js（http://momentjs.com/），如果你不介意使用其他JS庫，只是這樣做：

(moment.duration(moment($scope.endDate).diff(moment($scope.startDate)))).asMonths()

來源

2016-05-12 06:21:27 garethb

這會給我總＃選擇了幾個月。我的問題是，我無法在選擇內選擇日期。 – absingharora

設置選擇選項

回答

相關問題