jonthornton / Datepair.js

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

Start date getting moved back 1 day #27

Closed KrunchMuffin closed 9 years ago

KrunchMuffin commented 9 years ago

If I select a date say Oct 7/2014, then select 6am start and 10am end, the start date gets set back one day unless i put anchor:null. Is that the desired behavior?

KrunchMuffin commented 9 years ago

This comment is addressed in #28:

Also, by adding anchor:null, showDuration on endtime does not work and neither does the option in this script

$("#EventStartTime").on("changeTime", function(){
        var that = $(this);
        $('#EventEndTime').removeAttr("disabled");
        $('#EventEndTime').timepicker(
          'option',{
            'minTime': $(that).val()
        });
        validateEventDate($("#EventDate").val());
    });
jonthornton commented 9 years ago

I can't reproduce the behavior described. Please provide extremely specific instructions (url of working demo, browser version, step by step instructions) to make the glitch happen.

KrunchMuffin commented 9 years ago

Using Firefox 32.0.3 Can't give you the URL since I am working locally. Not sure what else would be relevant.

Here is my container

<span id="EventTimeContainer">
<div class="col-sm-4 col-lg-2">
    <div class="form-group">
        <input type="text" placeholder="Event Date" tabindex="14" size="16" data-date-start-date="+0d" class="date start form-control form-control-inline date-picker" readonly="" name="eventdate" id="EventDate">
    </div>
</div>
<div class="col-sm-4 col-lg-2">
    <div class="form-group">
        <input type="text" tabindex="15" placeholder="Start Time" class="time start form-control ui-timepicker-input" data-none-option="Event Start Time" data-scroll-default="6:00am" id="EventStartTime" name="eventstarttime" autocomplete="off">
    </div>
</div>
<div class="col-sm-4 col-lg-2">
    <div class="form-group">
        <input type="text" tabindex="16" placeholder="End Time" class="time end form-control ui-timepicker-input" data-none-option="Event End Time" data-show-duration="true" id="EventEndTime" name="eventendtime" disabled="" autocomplete="off">
    </div>
</div>
<input type="hidden" value="" class="date end" id="EventDateEnd">
</span>

javascript code

$('#EventTimeContainer').datepair({defaultTimeDelta: null});

$(".ui-timepicker-input").timepicker({
    disableTouchKeyboard: true,
    useSelect: false,
    className: 'timepickerWidth',
    step:15
});

$("#EventStartTime").on("changeTime", function(){
    var that = $(this);
    $('#EventEndTime').removeAttr("disabled");
    $('#EventEndTime').timepicker(
      'option',{
        'minTime': $(that).val()
    });
    validateEventDate($("#EventDate").val());
});
$("#EventEndTime").on("changeTime", function(){
    //had to put this in a timeout because the form field was not updating before the  load() method was executed, so it would report nextday incorrectly
    if(!$("#FormActions1").hasClass("hide")){
        $("#NewActivitiesContainer").remove();
        updateRunningTotals();
    }
    setTimeout(function(){
        if($('#EventDateEnd').val() !== $("#EventDate").val()){
            $("#NextDay").val("1");
        } else {
            $("#NextDay").val("0");
        }
        validateEventDate($("#EventDate").val());
    }, 100);
});
jonthornton commented 9 years ago

Post a jsFiddle. I need to be able to rule out other scripts in your app interfering with Datepair.

KrunchMuffin commented 9 years ago

I can give u a url, but i can't post it publicly.

KrunchMuffin commented 9 years ago

I have actually reproduced this in your examples. If you select say oct 10/14 7am then oct 10/14 9am then set the endtime to the starttime, then to another time, you will see the dates being changed incorrectly. Although in mine, i don't have to set the endtime to starttime for it to change.

KrunchMuffin commented 9 years ago

ok, so I was trying to get a fiddle working, and I did sort of, but the timepicker does not popup, so u have to enter time manually. Seems the culprit again is the defaultTimeDelta

http://jsfiddle.net/fv9m5my0/

KrunchMuffin commented 9 years ago

So after debugging this a little, I added && this.timeDelta !== null to line 264 of datepair.js and it appears to be working correctly. But I will defer to you since you know it better than I.

jonthornton commented 9 years ago

Your fiddle is broken because you're linking to assets from https://rawgit.com. https://rawgit.com/faq

I followed your instructions for seeing the problem on the demo page and couldn't find anything wrong.

KrunchMuffin commented 9 years ago

I am using rawgithub.com because of this http://geekdave.com/2013/06/19/linking-raw-github-files-from-jsfiddle/ Here is a video of one of the issues, from your site. http://screencast.com/t/mCVMm55Zxz0 then just add defaultTimeDelta:null to that example and you will see my issue.

EDIT I changed the source of the external fiddle files to your site and it is working now. Now you can see the issue happen.

http://jsfiddle.net/fv9m5my0/1/

KrunchMuffin commented 9 years ago

That was using Chrome 37.0.2062.124 m and I just went to test it in Firefox 32.0.3 and the timepicker does not even show on the examples page and get the error TypeError: this.dispatchEvent is not a function.

jonthornton commented 9 years ago

Thanks, the video helped. It should be fixed now.

KrunchMuffin commented 9 years ago

It's still happening. http://screencast.com/t/YJTVlUuQ