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;            }        };    }})();