Thursday, March 31, 2011

Enhancement of jquery datetime plugin

The problem
Lately integrate jquery datetime v1.0.5 plugin (http://plugins.jquery.com/project/datetime) into my web app to let user choose both date and time. When using it, found a problem if below conditions is applied.
  1. Min date and Max date is set.
  2. Default date and time is the middle of min and max date and the default date is following month of min date.
  3. e.g. Min date is 28/04/2011, Max date is 30/06/2011 and default date is 30/04/2011 16:00.

The problem are
  1. The calender shown May calender as expected but the previous button is disable and user cannot back to April which the Min date is set.
  2. User can forward to additional two months after the Max date month, which mean this case the next button only disable when user access until month of August. However, user still cannot choose the date after the Max date.




The catch
After study the code found out the issue. (Following line number is refer to the src edition of javascript). Code between line 121 - 124 is in charge to enable and disabled the next and previous button. Originally, condition  used is comparing the unix time get from date object ((min > date.getTime()) or ((min < date.getTime()). But somehow I found out that the date object day is modified at line 118 and this cause the month of date is changed in certain condition.




The solution
In order to solve the problem below is the code to replace the original code from line 121-124.
        html += ($.inArray(className, [ 'last', 'middle' ]) > -1) ? '' : '<a title="Prev" class="ui-datetime-prev ui-corner-all'+
          ((month <= this.minDate.getMonth()) ? ' ui-state-disabled' : '')+'"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>';

        html += ($.inArray(className, [ 'first', 'middle' ]) > -1) ? '' : '<a title="Next" class="ui-datetime-next ui-corner-all'+
        ((this.maxDate.getMonth() <= month) ? ' ui-state-disabled' : '')+'"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>';


What I change is the rule of comparing (month <= this.minDate.getMonth() and (this.maxDate.getMonth() <= month). [month] is a variable created at line 114, it's out of for loop and it never change after initialization. Since calender navigation is month by month, I use the [month] to compare again the Min date and Max date month.

2 comments:

  1. @comcrazy hey there ... im the author ... just saw this post. dont understand exactly what problem you're having ... i reproduced using the dates you gave above and can select any date between the min and max ... granted it should disable the forward button for july and august .. will fix that, but is that the only problem? would like to fix any bugs found =] thanks for using it though! can drop me a mail at rene@developmental.co.za if u want.

    ReplyDelete
  2. Thanks Rene for fixing the problem.

    ReplyDelete