Question

我想要实现的目标：
在Select中，我希望能够选择开始日期和结束日期，当我点击“应用”＃39;按钮，我想记录startDate和endDate的值来计算所选月数。该值需要传递给ng-model＆quot; monthLimit＆＃39;

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

Answer 1

如果您不介意使用其他JS库，可以使用moment.js（http://momentjs.com/），只需执行以下操作：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    menuVC *menuview = [segue destinationViewController];
    UIBarButtonItem *item = (UIBarButtonItem *)sender;
    UIView *view = [item valueForKey:@"view"];
    CGPoint centerOfButton = [view convertPoint:view.center toView:nil];    
    [self.circularTransitionHandler transitionWithDestinationViewController:menuview initialTransitionPoint:centerOfButton];
}

在选择选项中设置自定义日期

1 个答案: