Thursday, March 17, 2011

SharePoint's DateTimeControl.DateChanged Event BUG

Ok. So you want something to happen (e.g. update another DateTimeControl) when you change the value in the DateTimeControl.You realise that the DateTimeControl.DateChanged event could do the trick.

But NO...
Bugs I have identified:
1) The DateChanged Event does not get fired when you change the time
2) This snippet of code within the DateChangedEvent does not seem to work:
dtEnd.SelectedDate = dtStart.SelectedDate

* Bug 1 is known and so far here's the only workaround that I know (compliments to myself):
Insert a Jquery hack to "catch" the time change event:

$(document).ready(function() {
   //Hour drop down list 
   $("#ctl00_PlaceHolderMain_dtStart_dtStartDateHours").change(function() {
      var idx = $("#ctl00_PlaceHolderMain_dtStart_dtStartDateHours option").index($("option:selected"));
      if (idx < 24) idx++;
      $("#ctl00_PlaceHolderMain_dtEnd_dtEndDateHours option:eq(" + idx + ")").attr("selected", "selected");
});


//Minute drop down list
     $("#ctl00_PlaceHolderMain_dtStart_dtStartDateMinutes").change(function() {
      var idx2 = $("#ctl00_PlaceHolderMain_dtStart_dtStartDateMinutes option").index($("option:selected"));
      $("#ctl00_PlaceHolderMain_dtEnd_dtEndDateMinutes option:eq(" + idx2 + ")").attr("selected", "selected");
    });
});
The change event for the minute drop down list doesn't seem to work as yet. It is returning idx2 as -1. Will continue exploring on this.

A/N: Still not sure why it's not working, but here's another workaround:
$("#ctl00_PlaceHolderMain_dtEnd_dtEndDateMinutes").val($("#ctl00_PlaceHolderMain_dtStart_dtStartDateMinutes option:selected").val());
I realise that I don't need to get the index of the selected option as I can just replicate the values in the end date drop down.

* Bug 2 is less well-known, can't seem to find any solutions on google. Here's my current workaround (compliments to myself as well):
Add a "OnValueChangeClientScript" property to the DateTimeControl which calls "javascript:updateDates();".

function updateDates() {
$("#ctl00_PlaceHolderMain_dtEnd_dtEndDate").val($("#ctl00_PlaceHolderMain_dtStart_dtStartDate").val());
}

No comments:

Post a Comment