Angular ionic 日期組件 帶點擊前一天 後一天的功能

angular結合 ionic 寫的小時間組件

1、安裝nodejs

2、通過命令進入指定盤下路徑輸入以下命令：npm install -g bower

3、運行bower install 安裝對應的依賴JS庫

4、通過命令進入指定盤下路徑輸入以下命令：npm run install-g(如果已經執行過該方法，直接跳過該步)
5、進入開發環境：
npm run serve-dev 開啓開發環境服務

代碼部分：
Css代碼部分：

/***按鈕禁用樣式和啓用的樣式******/
.btnDisabled {
    background-color: #C0C0C0;
}
.btnEnabled {
    background-color: #0097FF;
}
/***搜索中的日期組件的樣式*******/
.month_select select, .year_select select{
    width: 40px;
    direction: ltr;
    margin: 0 auto;
}
.ionic_datepicker_popup .popup-buttons button,
.ionic_datepicker_popup .selected_date,
.ionic_datepicker_popup .popup-body .selected_date_full {
    background-color: #C29A2A!important;
}
.ionic_datepicker_popup .popup-body .month_select,
.ionic_datepicker_popup .popup-body .year_select
{
    border-bottom: 1px solid #C29A2A!important;
    margin-bottom: 1px;
}
.ionic_datepicker_popup .today {
    border: 1px solid #C29A2A!important;
}
.ionic_datepicker_popup .popup-body .button-clear ,
.ionic_datepicker_popup .popup-body .month_select:after,
.ionic_datepicker_popup .popup-body .year_select:after
{
    color: #C29A2A!important;
}
/***搜索中的日期組件的樣式以上*******/
//通用按鈕樣式
button {
    background: #45B4FF;
    border-radius: 5px;
    color: #ffffff;
    width: 75px;
    height: 30px;
    border: 0;
}
.changeDate {
    width: 100%;
    padding: 10px 10px!important;
    height: 55px;
    margin-bottom: 10px;
    white-space: nowrap;
}
.changeDate .bg {
    width: 99%;
    background-color: #E8E8E8;
}
.changeDate span {
    text-align: center;
    display: inline-block;
    height: 29px;
}
.width33 {
    width: 33%;
    display: inline-block;
    line-height: 2;
}

在 index.route.js 中添加日期組件的初始化

(function() {
    'use strict';
    angular
        .module('app')
        .config(routerConfig);

    // routerConfig
    function routerConfig($stateProvider, $urlRouterProvider, $ionicConfigProvider, ionicDatePickerProvider) {
        var datePickerObj = {
            inputDate: new Date(),
            titleLabel: '選擇日期',
            setLabel: '確定',
            todayLabel: '今天',
            closeLabel: '關閉',
            mondayFirst: false,
            weeksList: ['日', '一', '二', '三', '四', '五', '六'],
            monthsList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            templateType: 'popup',
            from: new Date(2009, 1, 1),
            to: new Date(2058, 12, 31),
            showTodayButton: true,
            dateFormat: 'yyyy-MM-dd',
            closeOnSelect: false,
            disableWeekdays: []
        };
        ionicDatePickerProvider.configDatePicker(datePickerObj);
        $stateProvider
            .state('list', {
                url: '/list',
                templateUrl: 'template/list.html',
                controller: 'ListController',
                controllerAs: 'vm'
            });

        $urlRouterProvider.otherwise('/list');
    }
})();

Html 代碼

<div class="white-bg changeDate">
   <div class="bg">
      <div class="width33" ng-model="yesterday" ng-click="yesterdayClick()">
                     <button>前一天</button>
                 </div>
      <span class="width33" ng-model="dateValue" ng-click="dateOpen()">{{dateValue}}</span>
      <div class="width33" ng-model="tomorrow" ng-click="tomorrowClick()" style="text-align: right">
                     <button ng-disabled="vm.isDisabled" ng-class="{'true' : 'btnDisabled', 'false' : 'btnEnabled'}[vm.isDisabled]">後一天</button>
                 </div>
   </div>
</div>

JS 代碼部分

(function() {
    'use strict';
    angular
        .module('app')
        .controller('ListController', ListController);
    ListController.$inject = ['$scope', 'ionicDatePicker', '$filter'];
    function ListController($scope,  ionicDatePicker, $filter) {
        var vm = this;
        var date = new Date();
        vm.maxDate = new Date(date.setDate(date.getDate() + 90));
        vm.today = $filter('date')(new Date(), 'yyyy-MM-dd');
        vm.isDisabled = false;
        vm.changeDate = changeDate;
        vm.changeDate();
        //初始化時間組件
        function changeDate(dateFlag) {
            var startDateObj;
            if (dateFlag) {
                $scope.dateValue = $filter('date')(dateFlag, 'yyyy-MM-dd');
            } else {
                $scope.dateValue = vm.today;
            }
            startDateObj = {
                //選擇日期後的回調
                callback: function (val) {
                    $scope.dateValue = $filter('date')(val, 'yyyy-MM-dd');
                    startDateObj.inputDate = new Date(val); //更新日期彈框上的日期
                },
                from: new Date(2010, 1, 1),
                to: vm.maxDate,
                inputDate: new Date($scope.dateValue),
                mondayFirst: true,
                closeOnSelect: false,
                dateFormat: 'yyyy-MM-dd',
                templateType: 'popup'
            };
            //打開開始日期選擇框
            $scope.dateOpen = function () {
                ionicDatePicker.openDatePicker(startDateObj);
            };
        }
        $scope.yesterdayClick = function () {
            var yDate = new Date($scope.dateValue);//獲取當前時間
            yDate.setDate(yDate.getDate() - 1);//設置天數 -1 天
            vm.changeDate(yDate);
            vm.isDisabled = false;
        };
        $scope.tomorrowClick = function () {
            var tDate = new Date($scope.dateValue);//獲取當前時間
            tDate.setDate(tDate.getDate() + 1);//設置天數 +1 天
            vm.changeDate(tDate);
            if ($scope.dateValue == $filter('date')(vm.maxDate, 'yyyy-MM-dd')) {
                vm.isDisabled = true;
            }
        };
    }
})();