Question

I would like to use the new Jquery UI Spinner widget on a website. My problem is that the website already uses jquery UI 1.8.10 and when I tried updating to 1.9 I got a lot of errors due to other plugins relying on V 1.8.

Is it possible to load the spinner widget on a page that has already loaded jquery ui 1.8? Is it possible to load jquery ui 1.9 in tandem so I can then load the spinner widget? Is it possible to modify the spinner widget to work with 1.8? Any help would be greatly appreciated.

Here is a quick fiddle of the spinner I want to use (selects hours and minutes and steps by half hours) – http://jsfiddle.net/fDpE9/5/

Answer 1

I decided to make a JavaScript function to create my own widget without jQuery UI. I added a create function to replace the input with the same HTML as a Jquery UI spinner, and attach my own spin function to the button clicks. Still need to add holding mouse down event on the buttons but you get the idea.

function createHourMinSpinner(elementSelector) {
    $(elementSelector).replaceWith('<span class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"><input id="' + $(elementSelector).attr('id') + '" class="ui-spinner-input" value="' + $(elementSelector).val() + '" name="' + $(elementSelector).attr('name') + '" style="width:' + $(elementSelector).width() + 'px;" aria-valuenow="0" autocomplete="off" role="spinbutton"><a onclick="spinHourMin(\'#' + $(elementSelector).attr('id') + '\', true);" class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n">▲</span></span></a><a onclick="spinHourMin(\'#' + $(elementSelector).attr('id') + '\', false);" class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s">▼</span></span></a>');
}

function spinHourMin(elementSelector, goingUp) {
    var originalVal = $(elementSelector).val() + "";
    var originalWhole = parseInt(originalVal.split(':')[0]);
    var originalFract = parseInt(originalVal.split(':')[1]);
    var newValue = "0:00";

    if (!goingUp && originalWhole == 0) {
        newValue = "0:00";
    } else if (goingUp && (originalFract == undefined || originalFract < 30 || isNaN(originalFract))) {
        newValue = originalWhole + ":30";
    } else if (goingUp && originalFract >= 30) {
        newValue = (originalWhole + 1) + ":00";
    } else if (!goingUp && (originalFract == undefined || originalFract == 0 || isNaN(originalFract))) {
        newValue = (originalWhole - 1) + ":30";
    } else if (!goingUp && originalFract > 30) {
        newValue = originalWhole + ":30";
    } else if (!goingUp && originalFract <= 30 && originalFract != 0 && originalFract != undefined) {
        newValue = originalWhole + ":00";
    }

    $(elementSelector).val(newValue);
}