TimePicker tpStartOnHourShowCallback extra parameter

[maxtorzito]

How can i call the javascript funcion in the tpStartOnHourShowCallback attribute.

In the example: http://fractalsoft.net/primeext-showcas ... eRange.jsf

The function tpStartOnHourShowCallback(a) only recives 'a' but how this variable is passed?

i only see 'tpStartOnHourShowCallback' but any parameter is passed here.

Code: Select all

<pe:timePicker value="#{timePickerController.time1}" mode="popup" onHourShow="tpStartOnHourShowCallback"  
                   onMinuteShow="tpStartOnMinuteShowCallback" widgetVar="startTimeWidget"/>

[smithh032772]

Good question. I have multiple timePickers on some of my xhtml pages, and I'd like to use this feature of timePicker, but I'm sure I will have to be responsible for specifying which timePickers are supposed to work with each other.

Most of my use cases are 2 different timepickers, but I do have a use case where i have 3 different timepickers that are very dependent on each other. Of course, I have business/validation logic in the bean, but it would be nice to use this feature of timePicker for all my use-cases.

I wonder if that feature is a hard-coded solution (or it only works if only 2 timepickers on the page), or is it possible for us to provide our own parameters, so we can specify which time values to reference.

[smithh032772]

I guess to develop a workaround, I could use the following attributes of timePicker:

startHours
Specifies first displayed hour. Possible range is 0-23. Default is 0.
endHours
Specifies last displayed hour. Possible range is 0-23. Default is 23.
startMinutes
Specifies first displayed minute. Possible range is 0-55. Default is 0.
endMinutes
Specifies last displayed minute. Possible range is 0-55. Default is 55.

and update these values via AJAX on blur/change. I may do that. Thanks for posting this forum topic.

or use pe:javascript somehow with this component, if at all possible.

[maxtorzito]

smithh032772 Yeah will be great if we can pass our own parameters, this could be possible?

Do you know from where the a or b parameter is passed?

[smithh032772]

smithh032772 Yeah will be great if we can pass our own parameters, this could be possible?

Do you know from where the a or b parameter is passed?

I don't know. It's best for you to look at PrimeFaces extensions source code for the following:

onHourShow
Defines a callback to enable / disable certain hours. Example: function onHourShow(hour). Default is null.
onMinuteShow
Defines a callback to enable / disable certain minutes. Example: function onMinuteShow(hour, minute). Default is null.

It seems as though the above shows/includes examples of how you can develop your own javascript method for each of those events.

You may need to look at the page source of timepicker showcase example for the tpStartOnHourShowCallback javascript method. You may want to look at showcase source.

[Oleg]

It seems we show compressed / minified JavaScript in the showcase . I will fix it soon. Here is the not compressed version:

Code: Select all

// Use case 2

function onHourShowCallback(hour) {
    if ((hour > 20) || (hour < 6)) {
        return false; // not valid
    }
    
    return true; // valid
}

function onMinuteShowCallback(hour, minute) {
    if ((hour == 20) && (minute >= 30)) {
        return false; // not valid
    }
    
    if ((hour == 6) && (minute < 30)) {
        return false; // not valid
    }
    
    return true;  // valid
}

// Use case 3

function tpStartOnHourShowCallback(hour) {
    if (typeof endTimeWidget === 'undefined') {
        return false;
    }

    var tpEndHour = parseInt(endTimeWidget.getHours());

    // Check if proposed hour is prior or equal to selected end time hour
    if (parseInt(hour) <= tpEndHour) {
        return true;
    }

    // if hour did not match, it can not be selected
    return false;
}

function tpStartOnMinuteShowCallback(hour, minute) {
    if (typeof endTimeWidget === 'undefined') {
        return false;
    }

    var tpEndHour = parseInt(endTimeWidget.getHours());
    var tpEndMinute = parseInt(endTimeWidget.getMinutes());

    // Check if proposed hour is prior to selected end time hour
    if (parseInt(hour) < tpEndHour) {
        return true;
    }

    // Check if proposed hour is equal to selected end time hour and minutes is prior
    if ((parseInt(hour) == tpEndHour) && (parseInt(minute) < tpEndMinute)) {
        return true;
    }

    // if minute did not match, it can not be selected
    return false;
}

function tpEndOnHourShowCallback(hour) {
    if (typeof startTimeWidget === 'undefined') {
        return false;
    }

    var tpStartHour = parseInt(startTimeWidget.getHours());

    // Check if proposed hour is after or equal to selected start time hour
    if (parseInt(hour) >= tpStartHour) {
        return true;
    }

    // if hour did not match, it can not be selected
    return false;
}

function tpEndOnMinuteShowCallback(hour, minute) {
    if (typeof startTimeWidget === 'undefined') {
        return false;
    }

    var tpStartHour = parseInt(startTimeWidget.getHours());
    var tpStartMinute = parseInt(startTimeWidget.getMinutes());

    // Check if proposed hour is after selected start time hour
    if (parseInt(hour) > tpStartHour) {
        return true;
    }

    // Check if proposed hour is equal to selected start time hour and minutes is after
    if ((parseInt(hour) == tpStartHour) && (parseInt(minute) > tpStartMinute)) {
        return true;
    }

    // if minute did not match, it can not be selected
    return false;
}

Passed are hours and minutes. They passed automatically from the widget to defined JS functions (function references in onHourShow / onMinuteShow).

[maxtorzito]

And what about if we want to pass other parameters, not only hour and minutes???

[Oleg]

Well, you can probably use some trick like this one

Code: Select all

onHourShow="function(hour) {var myparam = "abc"; tpStartOnHourShowCallback(hour, myparam);}"

onMinuteShow="function(hour, minute) {var myparam = "abc"; tpStartOnMinuteShowCallback(hour, minute, myparam);}"

This is not JSF related question, rather JavaScript.