A time picker for Ionic framework applications

demo
#87

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

      }
    };
  })
#89

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

#90

<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>

#91

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

#92

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…

#93

It returns the epoch value, which you can use.

#95

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.

#96

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
#97

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

#98

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

#99

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

#100

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

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.

#102

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

#103

Hello,

The timepicker is showing me a different time as my actual Epochtime, when i have an epoch time value passed to the object on inputTime the timepicker will show me the Epochtime +1hr (which corresponds with my local timezone),

for example when i pass Epochtime 52200 it should display 14:30, but the timepicker displays 15:30,

if i use the timepicker to set the time to 14:30 it also retuns the value 52200, but the popup display always opens with +1 hr

@rajeshwarpatlolla you mentioned that the timepicker does not use local time but UTC time, in my case it does convert to local time zone, how do i disable this?

@rajeshwarpatlolla is it possible to support “scrolling” of the time fields? I would like to have increments of 1 and let the user set the value by scrolling up or down( touch users on mobile phones) currently the user has to click many times to get an exact value. for my application the precision of 1 minute is important so I cannot up the stepssize

#104

i think it is because we use getUTCHour(). in my case also it displays +1 hour.
same problem with me.
try remove inputTime and try.

suppose now time is 2:30 so datepicker will display 3:30.

Don’t know why. :confused:

#105

Hi Everyone, i am trying to list all the ionic framework plugins in a single location. I had spent lot of time in getting all these plugins into one location, which hopefully should save so much of time of people who like to find one. I thought it would be helpful for the people, who wants to see the list of ionic plugins at one location. I have added as many as i can. If you feel that i missed any plugin, please feel free to make a PR or raise an issue with the details of the plugin.

Here you can find the list of all ionic plugins

#106

Hello @rajeshwarpatlolla, please help me, how to set inputDate = “selected date from input”?!
i’m trying to solve this problem for days and no results! Thanx

#107

There is an object which you are passing to the timepicker component. Please pass the object with the current time, that you wish to load. Please check the documentation once again.

#108

@rajeshwarpatlolla your date picker is awesome .I need when select year or month then selected date should not be disappear.