从模态AngularJS设置日期

时间:2016-07-20 07:00:06

标签: html angularjs date datepicker

我在AngularJS中有一个模态和一个面板。现在我要做的是在从模态中选择日期后显示日期,以便在面板中显示。我有开始日期和结束日期。

这是我的模态的主体,我可以在其中选择开始日期和结束日期:

<div class="modal-body">
        <md-input-container flex> <input type="date"
            ng-model="startDateL"> </md-input-container>
        <md-input-container flex> <input
            type="date" ng-model="endDateL"> </md-input-container>
        <md-button ng-click="setDate()" class="md-primary">Update</md-button>
    </div>

这是我的小组的主体:

  <div class="panel-body">
         <div class="row" ng-init="defaultDate()">
                <div class="col-lg-12" ng-if="stDate && endDate"> 

                    <p>{{ stDate | date : 'longDate' }} - {{
                        endDate | date : 'longDate' }}</p>
                </div> 

         </div>
  </div>

这是JS文件:

 angular.module('appl').directive('datePickerDirective',function($mdDialog, $rootScope, $filter){
    return {
        restrict: 'E',
        templateUrl:'components/date-picker-select/date-picker-select.html',
        scope: {},

        controller:function($scope){

            $scope.defaultDate = function(){
                console.log("Dateeeeeeeee");
                var date = new Date();
                $scope.startDate = new Date(date.getFullYear(),date.getMonth(),1);
                $scope.todaysDate = new Date();
            }

             $scope.footerLinkClicked  = function(){    
                $mdDialog.show({
                    controller : datePickerController,
                    templateUrl : 'components/date-picker-select/date-picker-modal.html',
                    parent : angular.element(document.body),
                    clickOutsideToClose:true
                }).then(function(answer) {
                    console.log("Fff");
                }, function() {
                });    
            }

        },

        controllerAs: 'DatePickerCtrl'

    }

})

function datePickerController($scope, $mdDialog, $rootScope, datePickerFactory, $filter){
    console.log("suntem in date picker sel");
    var date = new Date();
    $scope.startDateL =  new Date(date.getFullYear(),date.getMonth(),1);
    $scope.endDateL = new Date();


    $scope.close = function() {
        $mdDialog.hide();
        console.log("closing");
    }

    $scope.setDate = function(startDate, endDate) {
        $rootScope.startDate = $scope.startDateL;
        $rootScope.endDate = $scope.endDateL;


        $scope.stDate = $filter('date')($rootScope.startDate,'yyyy-MM-dd');
        $scope.enDate = $filter('date')($rootScope.endDate,'yyyy-MM-dd');

        console.log(stDate);
        console.log(enDate);

        $rootScope.$broadcast('dateWasChosen');
        $mdDialog.hide();

    }

}

我在setDate函数()中设置它们后尝试显示stDate和endDate,但它无法正常工作。有人有其他想法吗?

提前致谢!

0 个答案:

没有答案