Home/ Questions/Q 8496765
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T23:56:34+00:00

I want to make a calendar where you can select the date, and automatically

  • 0

I want to make a calendar where you can select the date, and automatically you can select the time. I shouldn’t use butons to change the time 🙁

So I have the next:

<rich:calendar id="currentDate" popup="true"
    datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
    showFooter="false" required="true" resetTimeOnDateSelect="true"
    oncollapse="return timeSelected;"
    showWeeksBar="false" showWeekDaysBar="true"
    value="#{bean.currentDate}"
    ondateselected="timeSelected=false; Richfaces.getComponent('calendar',this).showTimeEditor(); return true;"
    ontimeselected="timeSelected=true; return true;"
    ontimeselect="timeSelected=true; return true;"
>
    <a4j:support event="onchange" ajaxSingle="true" />
</rich:calendar>

But it doesn’t work at all.
There are two problems.

1 – When you choose a day, the popup appears. But if you press ‘Accept’ withouth changing the time, you can’t close the calendar 🙁

2 – Once you have selected the date/time, but you want to change only the time, you can’t do it because you can’t select the current day, so you can’t see the time editor.

I’m using rich faces 3.3.3

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The ondateselected and ontimeselected attributes are only invoked when the date or time is actually changed, not when you just click on the date or closes the time editor. There are no standard <rich:calendar> attributes which capture that. You need to override the standard calendar.js functions eventCellOnclick() (which is invoked when a date is clicked) and hideTimeEditor() (which is invoked when time editor is closed).

    The following works for me with RichFaces 3.3.3 (and Mojarra 1.2_15 and Tomcat 7.0.29).

    <h:form id="form">
    <rich:calendar id="currentDate" popup="true"
        datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
        showFooter="false" required="true" resetTimeOnDateSelect="true"
        showWeeksBar="false" showWeekDaysBar="true"
        value="#{bean.currentDate}"
        oncollapse="return this.component.timeSelected;"
    >
        <a4j:support event="onchange" ajaxSingle="true" />
    </rich:calendar>
</h:form>

<script>
    var currentDateComponent = $('form:currentDate').component;

    var originalCellOnClickFunction = currentDateComponent.eventCellOnClick;
    currentDateComponent.eventCellOnClick = function() {
        this.timeSelected = false;
        originalCellOnClickFunction.apply(this, arguments);
        currentDateComponent.showTimeEditor();
    };

    var originalHideTimeEditorFunction = currentDateComponent.hideTimeEditor;
    currentDateComponent.hideTimeEditor = function() {
        this.timeSelected = true;
        originalHideTimeEditorFunction.apply(this, arguments);
    };
</script>

    Note that ondateselected, ontimeselect and ontimeselected attributes are removed and that oncollapse attribute has been changed. Also note that the script must be executed after the calendar is been populated in the DOM. So the above works as-is. If you want to move the script into its own JS file (which is a good thing), make sure that it’s executed on DOM ready only (i.e. put script in end of <body>, or execute it by window.onload() or jQuery.ready()).

    • 0