A time picker for Ionic framework applications

Thanks for your suggestion. :grinning:

I am pretty new to ionic and I am trying to implement your time picker. However, I realise that the displayed time picker doesn’t correspond to my local timing when I perform a filter.

For example, on your time picker I selected 3:00PM.

In my code, I performed console.log($filter(‘date’)(selectedTime, ‘HH:mm a’));
and it seems to print out 23:00 instead. My timezone is GMT +8.

Is there any way such that the time picker would display my actual time zone timing?

Thank you for your help and I really hope to hear from you soon.

This time picker doesn’t deal with the local time zone. Whenever you select some time all it will perform is giving the time in epoch to the user, so that you can do any custom manipulations.

Hi I tried your timepicker but there is no date in my console.log even in my html. What was my error? I have already the directives to main app.

Kindly please follow the instructions as mentioned in the github repo. Surely you will get it.

I followed the instruction above. but still not getting the selected time. Same to the codes in github repo. Please help me.

If you followed all the instructions as it is, then you should get it for sure. There could be something missing in your code. Could you please share your code snippet?

$scope.timePickerObject = {

          inputEpochTime: ((new Date()).getHours() * 60 * 60),  //Optional
          step: 15,  //Optional
          format: 12,  //Optional
          titleLabel: '12-hour Format',  //Optional
          setLabel: 'Set',  //Optional
          closeLabel: 'Close',  //Optional
          setButtonType: 'button-positive',  //Optional
          closeButtonType: 'button-stable',  //Optional
          callback: function (val) {    //Mandatory

          function timePickerCallback(val) {
              if (typeof (val) === 'undefined') {
                console.log('Time not selected');
              } else {
                var selectedTime = new Date(val * 1000);
                console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC');

app.directive(‘standardTimeMeridian’, function() {
return {
restrict: ‘AE’,
replace: true,
scope: {
etime: ‘=etime’
template: “{{stime}}”,
link: function(scope, elem, attrs) {

        scope.stime = epochParser(scope.etime, 'time');

        function prependZero(param) {
          if (String(param).length < 2) {
            return "0" + String(param);
          return param;

        function epochParser(val, opType) {
          if (val === null) {
            return "00:00";
          } else {
            var meridian = ['AM', 'PM'];

            if (opType === 'time') {
              var hours = parseInt(val / 3600);
              var minutes = (val / 60) % 60;
              var hoursRes = hours > 12 ? (hours - 12) : hours;

              var currentMeridian = meridian[parseInt(hours / 12)];

              return (prependZero(hoursRes) + ":" + prependZero(minutes) + " " + currentMeridian);

        scope.$watch('etime', function(newValue, oldValue) {
          scope.stime = epochParser(scope.etime, 'time');


Could you please post the HTML code also. Also please cross check whether the html and the controller are associated or not.

<div class="card"> <label class="item item-input"> <input type="text" placeholder="Pick date" ng-model="datepicker" name="datepicker" ng-click="opendateModal()" readonly> </label> <ionic-timepicker input-obj="timePickerObject"> <button class="button button-stable button-block"> <standard-time-meridian etime='epochTime'></standard-time-meridian> </button> </ionic-timepicker> </div>

They are associated and it seems there is no problem with that. I don’t know where’s my error now.

How do i get AM/PM in 12 hr format and if i have selected 12:00 or 11:01 in existing time picker value getting like 12:0 or 11:1…

It returns the epoch value, which you can use.

Hi All, a new version of ionic-timepicker v0.5.0 has ben releases with new features. If anyone want to use ionic-timepicker please use this new version.


Thank you for your time picker! I am wondering if it is possible to limit the time selection e.g only able to select from 9am to 12pm? Thank you so much for your help!

1 Like

Restricting the time is not possible with this version of component.

+1 for restricting time. Otherwise it’s a great plugin.

Another new version 0.5.1 is released, which has a bug fix. Please check it out here


I am facing issue with date-picker, when i open date picker in device it will automatically open year select box in both android and ios, can you tell me what i am doing wrong.

    $scope.datePickerOption = {
      callback: function (val) {  
        $scope.scheduleObj.dateString = moment(val).format("MMM D, YYYY");
        $scope.scheduleObj.date = val;
    $scope.openDatePickerFromDate = function(){
    	if($scope.scheduleObj && $scope.scheduleObj.date){
		 	$scope.datePickerOption["inputDate"] = new Date($scope.scheduleObj.date);
        var returnVal = ionicDatePicker.openDatePicker($scope.datePickerOption);