-
-
Notifications
You must be signed in to change notification settings - Fork 160
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
9b6a004
commit 69f6404
Showing
12 changed files
with
345 additions
and
334 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<div class=""> | ||
<div class="heading">{{time.hours}} : {{time.minutes}} <span ng-show="time.format == 12">{{time.meridian}}</span></div> | ||
<div class="row" ng-class="{'padding_left_15px':time.format == 12}"> | ||
<div class="col col-25" ng-class="{'col-offset-20 col-25':time.format == 24}"> | ||
<button type="button" class="button button-clear button-small button-dark time_picker_arrows" | ||
ng-click="increaseHours()"> | ||
<i class="icon ion-chevron-up"></i></button> | ||
<div ng-bind="time.hours" class="time_picker_box_text"></div> | ||
<button type="button" class="button button-clear button-small button-dark time_picker_arrows" | ||
ng-click="decreaseHours()"> | ||
<i class="icon ion-chevron-down"></i></button> | ||
</div> | ||
<label class="col col-10 time_picker_colon"> : </label> | ||
|
||
<div class="col col-25" ng-class="{'col-25':time.format == 24}"> | ||
<button type="button" class="button button-clear button-small button-dark time_picker_arrows" | ||
ng-click="increaseMinutes()"><i class="icon ion-chevron-up"></i></button> | ||
<div ng-bind="time.minutes" class="time_picker_box_text"></div> | ||
<button type="button" class="button button-clear button-small button-dark time_picker_arrows" | ||
ng-click="decreaseMinutes()"><i class="icon ion-chevron-down"></i></button> | ||
</div> | ||
<label class="col col-10 time_picker_colon" ng-if="time.format == 12"> : </label> | ||
|
||
<div class="col col-25" ng-if="time.format == 12"> | ||
<button type="button" class="button button-clear button-small button-dark time_picker_arrows" | ||
ng-click="changeMeridian()"><i class="icon ion-chevron-up"></i></button> | ||
<div ng-bind="time.meridian" class="time_picker_box_text"></div> | ||
<button type="button" class="button button-clear button-small button-dark time_picker_arrows" | ||
ng-click="changeMeridian()"><i class="icon ion-chevron-down"></i></button> | ||
</div> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
angular.module('ionic-timepicker', [ | ||
'ionic-timepicker.provider', | ||
//'ionic-timepicker.templates' | ||
]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,153 @@ | ||
angular.module('ionic-timepicker.provider', []) | ||
|
||
.provider('ionicTimePicker', function () { | ||
|
||
var config = { | ||
setLabel: 'Set', | ||
closeLabel: 'Close', | ||
inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)), | ||
format: 12, | ||
step: 15 | ||
}; | ||
|
||
this.configTimePicker = function (inputObj) { | ||
angular.extend(config, inputObj); | ||
}; | ||
|
||
this.$get = ['$rootScope', '$ionicPopup', function ($rootScope, $ionicPopup) { | ||
|
||
var provider = {}; | ||
var $scope = $rootScope.$new(); | ||
$scope.today = resetHMSM(new Date()).getTime(); | ||
$scope.time = {}; | ||
|
||
//Reset the hours, minutes, seconds and milli seconds | ||
function resetHMSM(currentDate) { | ||
currentDate.setHours(0); | ||
currentDate.setMinutes(0); | ||
currentDate.setSeconds(0); | ||
currentDate.setMilliseconds(0); | ||
return currentDate; | ||
} | ||
|
||
|
||
//Increasing the hours | ||
$scope.increaseHours = function () { | ||
$scope.time.hours = Number($scope.time.hours); | ||
if ($scope.mainObj.format == 12) { | ||
if ($scope.time.hours != 12) { | ||
$scope.time.hours += 1; | ||
} else { | ||
$scope.time.hours = 1; | ||
} | ||
} | ||
if ($scope.mainObj.format == 24) { | ||
$scope.time.hours = ($scope.time.hours + 1) % 24; | ||
} | ||
$scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours; | ||
}; | ||
|
||
//Decreasing the hours | ||
$scope.decreaseHours = function () { | ||
$scope.time.hours = Number($scope.time.hours); | ||
if ($scope.mainObj.format == 12) { | ||
if ($scope.time.hours > 1) { | ||
$scope.time.hours -= 1; | ||
} else { | ||
$scope.time.hours = 12; | ||
} | ||
} | ||
if ($scope.mainObj.format == 24) { | ||
$scope.time.hours = ($scope.time.hours + 23) % 24; | ||
} | ||
$scope.time.hours = ($scope.time.hours < 10) ? ('0' + $scope.time.hours) : $scope.time.hours; | ||
}; | ||
|
||
//Increasing the minutes | ||
$scope.increaseMinutes = function () { | ||
$scope.time.minutes = Number($scope.time.minutes); | ||
$scope.time.minutes = ($scope.time.minutes + $scope.mainObj.step) % 60; | ||
$scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; | ||
}; | ||
|
||
//Decreasing the minutes | ||
$scope.decreaseMinutes = function () { | ||
$scope.time.minutes = Number($scope.time.minutes); | ||
$scope.time.minutes = ($scope.time.minutes + (60 - $scope.mainObj.step)) % 60; | ||
$scope.time.minutes = ($scope.time.minutes < 10) ? ('0' + $scope.time.minutes) : $scope.time.minutes; | ||
}; | ||
|
||
//Changing the meridian | ||
$scope.changeMeridian = function () { | ||
$scope.time.meridian = ($scope.time.meridian === "AM") ? "PM" : "AM"; | ||
}; | ||
|
||
function setMinSecs(ipTime, format) { | ||
$scope.time.hours = ipTime / (60 * 60); | ||
|
||
var rem = ipTime % (60 * 60); | ||
if (format == 12) { | ||
if ($scope.time.hours > 12) { | ||
$scope.time.hours -= 12; | ||
$scope.time.meridian = 'PM'; | ||
} else { | ||
$scope.time.meridian = 'AM'; | ||
} | ||
} | ||
$scope.time.minutes = rem / 60; | ||
|
||
$scope.time.hours = $scope.time.hours.toFixed(0); | ||
$scope.time.minutes = $scope.time.minutes.toFixed(0); | ||
|
||
if ($scope.time.hours.toString().length == 1) { | ||
$scope.time.hours = '0' + $scope.time.hours; | ||
} | ||
if ($scope.time.minutes.toString().length == 1) { | ||
$scope.time.minutes = '0' + $scope.time.minutes; | ||
} | ||
$scope.time.format = $scope.mainObj.format; | ||
} | ||
|
||
provider.openTimePicker = function (ipObj) { | ||
var buttons = []; | ||
$scope.mainObj = angular.extend({}, config, ipObj); | ||
setMinSecs($scope.mainObj.inputTime, $scope.mainObj.format); | ||
|
||
buttons.push({ | ||
text: $scope.mainObj.setLabel, | ||
type: 'button_set', | ||
onTap: function (e) { | ||
var totalSec = 0; | ||
|
||
if ($scope.time.format == 12) { | ||
if ($scope.time.meridian == 'PM') { | ||
$scope.time.hours = Number($scope.time.hours); | ||
$scope.time.hours += 12; | ||
} | ||
totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); | ||
} else { | ||
totalSec = ($scope.time.hours * 60 * 60) + ($scope.time.minutes * 60); | ||
} | ||
$scope.mainObj.callback(totalSec); | ||
} | ||
}); | ||
|
||
buttons.push({ | ||
text: $scope.mainObj.closeLabel, | ||
type: 'button_close' | ||
}); | ||
|
||
$scope.popup = $ionicPopup.show({ | ||
templateUrl: 'ionic-timepicker.html', | ||
scope: $scope, | ||
cssClass: 'ionic_timepicker_popup', | ||
buttons: buttons | ||
}); | ||
|
||
}; | ||
|
||
return provider; | ||
|
||
}]; | ||
|
||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,65 @@ | ||
/* Empty. Add your own CSS if you like */ | ||
|
||
.timePickerColon { | ||
padding-top: 40px; | ||
/* | ||
To customize the look and feel of Ionic, you can override the variables | ||
in ionic's _variables.scss file. | ||
For example, you might change some of the default colors: | ||
*/ | ||
.ionic_timepicker_popup .font_28px { | ||
font-size: 28px; | ||
} | ||
.ionic_timepicker_popup .margin_zero { | ||
margin: 0; | ||
} | ||
.ionic_timepicker_popup .padding_zero { | ||
padding: 0; | ||
} | ||
.ionic_timepicker_popup .popup { | ||
background-color: #ffffff; | ||
} | ||
.ionic_timepicker_popup .popup-head { | ||
display: none; | ||
} | ||
.ionic_timepicker_popup .popup-body { | ||
padding: 0; | ||
} | ||
.ionic_timepicker_popup .popup-buttons { | ||
padding: 0; | ||
min-height: 44px; | ||
height: 44px; | ||
} | ||
.ionic_timepicker_popup .popup-buttons .button:not(:last-child) { | ||
margin-right: 1px; | ||
} | ||
.ionic_timepicker_popup .padding_left_15px { | ||
padding-left: 15px; | ||
} | ||
.ionic_timepicker_popup .heading { | ||
height: 44px; | ||
background-color: #009688; | ||
color: #ffffff; | ||
text-align: center; | ||
line-height: 44px; | ||
font-size: 18px; | ||
font-weight: bold; | ||
} | ||
.ionic_timepicker_popup .time_picker_colon { | ||
padding-top: 45px; | ||
text-align: center; | ||
font-weight: bold; | ||
} | ||
|
||
.timePickerArrows { | ||
.ionic_timepicker_popup .time_picker_arrows { | ||
width: 100%; | ||
} | ||
|
||
.timePickerBoxText { | ||
.ionic_timepicker_popup .time_picker_box_text { | ||
height: 40px; | ||
text-align: center; | ||
border: 1px solid #dddddd; | ||
font-size: 16px; | ||
padding-top: 5px; | ||
line-height: 38px; | ||
} | ||
|
||
.overflowShow { | ||
.ionic_timepicker_popup .overflowShow { | ||
white-space: normal !important; | ||
} | ||
.ionic_timepicker_popup .button_set, .ionic_timepicker_popup .button_close { | ||
background-color: #009688; | ||
color: #ffffff; | ||
} |