pickatime issue with default value and view value

[mikkelbergsoerensen]

I am using a default value on the timepicker which i set with "select" and "view". I am setting this everytime the value changes.

My problem is that when i click on the timepicker the options list is not scrolling to the view value, but instead at the top.

If i the click a value in the options list myself an open it again it works fine. I have tried to also just hardcode the view value. Still only works on manually selecting a value from the options list.

I have tried afterwards to log get('view'), and it contains my provided value

My code looks like this: element.pickatime('picker').set('select', totalMins); element.pickatime('picker').set('view', [15,30]);

[mikkelbergsoerensen]

I have also tried to use render() on moving it to onOpen. Still with no success

[trendoman]

@mikkelbergsoerensen It happened to me as well, I solved it by correct CSS. I found that if the linked stylesheet is disabled everything worked fine. Then I reenabled it and found the source of trouble.

For me it was .picker__holder{ display:none }, which I changed to display:inherit (or can simply remove). Secondly, .picker__list shouldn't have max height property, instead I removed from this class anything regarding to height and put the height into following: .picker--time.picker--opened .picker__holder { max-height: 250 px; }

[mikkelbergsoerensen]

@trendoman thanks for your reply. I tried your suggestion and it unfortunately did nothing for me. I do not think it is a css issue, because the view value actually works. You just have to click a value manaully in the timepicker one time. If you set default value through javascript with set "select and view" then it does not work, at least for me.

[trendoman]

Perhaps data-value attribute can do the job better. $(element).data('value', '15:30'); Set this before init of timepicker and time should get selected. It doesn't solve your request though, just a quick workaround that worked for me.

[mikkelbergsoerensen]

I am not having trouble with the value. I only have problems with the scroll position of the overlay when setting the value and view from javascript. Im using the timepicker on an angular solution where i have made a directive for it. So i have a scope value that i can manipulate and then litsten for changes and then update the timepicker. This is where it goes wrong. (but only a problem with the scroll position)

[usmanlogin]

@mikkelbergsoerensen any success on this ?

[DanielRuf]

@usmanlogin well, this was 2 years ago - I do not think that the person still knows how it was solved if it was solved.

[ScottConnor-COT]

$('.timepicker').pickatime({
    defaultTime: get_nearest_quarter_hour(),
    interval: 15,
    onOpen: (function () {
        var $pickerHolder = this.$holder.find(".picker__list"),
        $viewset = $pickerHolder.find('.picker__list-item--highlighted');
        this.$holder.scrollTop(($viewset.index() - 3) * $viewset.outerHeight());
    })
});
function get_nearest_quarter_hour() { 
    var date = new Date();

    var mins = date.getMinutes(); 


    var hrs = date.getHours(); 
    var m = (Math.round(mins/15) * 15) % 60; 


    m = m < 10 ? '0' + m : m; 
    var h = mins > 52 ? (hrs === 23 ? 0 : ++hrs) : hrs; 


    h = h < 10 ? '0' + h : h; 
    return h + ":" + m;
} 

[ScottConnor-COT]

sorry about the shitty formatting couldnt get it to work. just a workaround that worked for me.

[DanielRuf]

I've updated the comment and added code fences (three backticks).