A time picker for Ionic framework applications

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

          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.

Hi,

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

Hello,

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

Please try the demo link. i tested in multiple devices, but it is working fine. Also please check the events or functions you are calling inside your code.

Hi, I used to love this time picker and used it for a while, but after facing several issues and wanting to improve on the user experience, I’ve created a new component which has more of a native feel to.

If anyone is interested, it can be seen at:

Hope this helps,
Thanks