Current date selection on month navigation problem

[costinuParticipant]

Hi,

I think there is a problem when navigating back and forward on calendar. When you navigate the current date is changing according with the new selected month (which is good), but the calendar interface is not updated. It looks like a month with no date selected. This is confusing the user because it does not know what is the current date.

There is a workaround or something which can trigger the UI update of calendar?

Thank you!
Costin

[Peter StoevKeymaster]

Hi Costin,

A selection in the calendar happens when the end-user clicks on a Date or selects a new date when there’s an already selected one using the keyboard’s arrow keys. Pressing the navigation arrows in the Calendar’s title will not change the selected date, it will change only the view and that’s by design.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[costinuParticipant]

Hi Peter,

Thank you for the quick response.

I use the valuechanged event in order to do some stuffs and I use the event argument date:
$(‘#jqxCalendar’).bind(‘valuechanged’, function (event) {
var date = event.args.date;
doing something with the date

}

When pressing the navigation buttons the view is changed indeed with the previous/next month and also the value from event argument is changing too. Even with getDate method I’ve get the new value from previous/next month. This is good for me, but the problem is that UI is not updated accordingly.

You can see this behavior in demos:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcalendar/index.htm#demos/jqxcalendar/events.htm

when you navigate, the event log is filled with the new dates which are in current month, but the UI is not updated.

Thanks,
Costin

[Peter StoevKeymaster]

Hi Costin,

The UI is updated correctly, however you should note that Selected Date is not equal to Current Date. By navigating with the navigation arrows in the Calendar’s title, the selection is not changed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[costinuParticipant]

Hi Peter,

Something is confusing me. What is affecting the methods setDate and getDate , the Current date or Selected date?

For me is important to have the same values in getDate return and the UI. It’s there a way to do this?

Thank you very much,
Costin

[Peter StoevKeymaster]

Hi Costin,

getDate returns the current date. To get the selected date use $(“#calendar”).jqxCalendar(‘selectedDate’).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[costinuParticipant]

Thank you for tip. I didn’t know about selectedDate.

How can I set the selected date. I’ve tried to change with $(“#calendar”).jqxCalendar(‘selectedDate’,somedatevalue) on valuechanged, but is trigger a chain infinite loops of events decreasing/increasing month by month.

I’ve found a workaround by setting the selectedDate with a delay in timeout (200 ms), but I’m not sure that is the best solution.

Best regards,
Costin

[Peter StoevKeymaster]

Hi Costin,

Setting the ‘selectedDate’ will raise a ‘valueChanged’ event. If you set the ‘selectedDate’ property in the ‘valueChanged’ event handler, an infinite loop should be expected.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[costinuParticipant]

Hi Peter,

I’ve tried to avoid the loop by exit the event procedure when currentDate==selectedDate. The strange thing is for example when I’ve navigate backwards, when I’ve set selectedDate the event is triggered again with the currentDate in the previous month.

Putting the set of selectedDate in a timer this was not happen anymore.

For example, for backwards navigation the following code:

$(‘#calendar’).bind(‘valuechanged’, function (event) {
var mDate= event.args.date;
var seldate=$(“#calendar”).jqxCalendar(“selectedDate”);
if (seldate.getFullYear()!=mDate.getFullYear() || seldate.getMonth()!=mDate.getMonth() || seldate.getDate()!=mDate.getDate()){
$(“#calendar”).jqxCalendar(“selectedDate”,new Date(mDate.getFullYear(),mDate.getMonth(),mDate.getDate()));
return;
}

//do some stuff here
}

is going into infinite loop by decreasing one month at each loop.
And the following code:

$(‘#calendar’).bind(‘valuechanged’, function (event) {
var mDate= event.args.date;
var seldate=$(“#calendar”).jqxCalendar(“selectedDate”);
if (seldate.getFullYear()!=mDate.getFullYear() || seldate.getMonth()!=mDate.getMonth() || seldate.getDate()!=mDate.getDate()){
setTimeout(‘$(“#calendar”).jqxCalendar(“selectedDate”,new Date(‘ + mDate.getFullYear() + ‘,’ + mDate.getMonth() + ‘,’ + mDate.getDate() + ‘));’,200);
return;
}

//do some stuff here
}

is working good.

I’m just wondering if this is a best approach or if you have a better solution to set the selected date equal with current date when the enduser navigate thru calendar.

Thank you,
Costin

[Author]

Posts