jonthornton / Datepair.js

A javascript plugin for intelligently selecting date and time ranges, inspired by Google Calendar.
https://www.jonthornton.com/Datepair.js
358 stars 87 forks source link

Not scrolling to selected time when initially set using VAL(jquery) #86

Closed avinash-ramireddy closed 6 years ago

avinash-ramireddy commented 7 years ago

Hi I am using fullcalendar.js where on select of day it loads MODAL POP UP(bootstrap) which has date and times set initially(times being set to now and now+1 hr in start and end resp.) Problem is when I click on start time first ,dropdown takes me to the value selected(in my case NOW). When I move to end time and come back to start,it's not jumping to the selected time.

So I tried in fiddle http://jsfiddle.net/avinashramireddy24/atccm35c/5/ and it's working fine there.

Also I am not using jquery-datepair.js I am just using datepair with bootstrap datepicker and jquery timepicker . PFA screenshot 84

Is this some design issue I am not able to find or something else?

avinash-ramireddy commented 7 years ago

Hi, If you see my fiddle in above comments,I was passing initial value on loading of datepair. I think something has to do with the VAL. So I tweaked script file a bit and found that in jquery-timepicker file near the lines of


 if (!selected.length) {
                var timeInt = _time2int(_getTimeValue(self));
              ---------some code here---------
            }

            if (selected && selected.length) {

              //var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight();
                var topOffset = 0 + selected.position().top - selected.outerHeight();

                list.scrollTop(topOffset);
            }
            //else {
            //    list.scrollTop(0);
            //}

 // prevent scroll propagation
 if (settings.stopScrollPropagation) {
                $(document).on('wheel.ui-timepicker', '.ui-timepicker-wrapper', function (e) {
                    e.preventDefault();
                    var currentScroll = $(this).scrollTop();
                    $(this).scrollTop(currentScroll + e.originalEvent.deltaY);
                });
            }

As you can see I set list.scrollTop() to 0

          //var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight();
            var topOffset = 0 + selected.position().top - selected.outerHeight();

because when I first click on start time it takes some height(let's say 1943) then when I click on it second time it is calculating based on this value(means 1943+b-c). Since I have max of let's say 2500 it is moving to last item position.

Only problem I am facing now is end time value not selected on loading because of regex matching pattern(only on LOADING).Later when we change start time ,end time is selected.

_time2int(timeString, settings) does not match any value of end time.So it's returning null.

My time picker settings have *timeFormat: 'G:i',

I am still finding to match pattern. BTW I am using jquery-timepicker v1.11.1 version(which I don't think any changes are made regarding this selected feature.I tried in other versions also) Please share your thoughts on this....

jonthornton commented 7 years ago

I'm sorry but I don't understand the question. Try posting a fiddle of what's broken.

avinash-ramireddy commented 7 years ago

1.Please select the end time from the link http://jsfiddle.net/avinashramireddy24/atccm35c/5/ when it first loads .As you can see it's not highlighting the end-time.

2.I had same problem with start time in my machine but not in fiddle. Using above solution near the lines of

//var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight();
            var topOffset = 0 + selected.position().top - selected.outerHeight();

fixed start time (local)

3.But this does not trigger highlight of end-time.

4.All this is happening because of using VAL I guess. When I change start time it is correctly highlighting end-time. Only when set using VAL first time I am facing this kind of problems