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,to: vm.maxDate,inputDate: new Date($scope.dateValue),mondayFirst: true,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;
            }
        };
    }
})();