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