angular结合 ionic 写的小时间组件

1、安装nodejs

2、通过命令进入指定盘下路径输入以下命令：npm install -g bower

3、运行bower install 安装对应的依赖JS库

4、通过命令进入指定盘下路径输入以下命令：npm run install-g(如果已经执行过该方法，直接跳过该步)
5、进入开发环境：
npm run serve-dev 开启开发环境服务

代码部分：
Css代码部分：

@H_301_19@/***按钮禁用样式和启用的样式******/ .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 中添加日期组件的初始化

@H_301_19@(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 代码

@H_301_19@<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 代码部分

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