ericjgagnon / wickedpicker

A simple jQuery timepicker
http://ericjgagnon.github.io/wickedpicker/
MIT License
93 stars 78 forks source link

fixed modal problem -> Append in div, not in body #71

Open JulienSGN opened 6 years ago

JulienSGN commented 6 years ago

is there a way to append the timepicker after the input field instead of body ? In fixed modal, the timepicker is moving when scrolling...

Thx

JulienSGN commented 6 years ago

OK this is solved for me.... You have to create a function to initialize the wickedpicker for fixed positionning, the goal is to identify the input id which is focused, and append the .wickedpicker in its parent div (div set on relative positioning and containing the focused input).

Do this in the "show" option

function create_fixed_datepicker(input_id) {
    var options_fixed = { 
        now: "00:00", //hh:mm 24 hour format only, defaults to current time
        twentyFour: true, //Display 24 hour format, defaults to false
        upArrow: 'wickedpicker__controls__up', //The up arrow class selector to use, for custom CSS
        downArrow: 'wickedpicker__controls__down', //The down arrow class selector to use, for custom CSS
        close: 'wickedpicker__close', //The close class selector to use, for custom CSS
        hoverState: 'hover-state', //The hover state class to use, for custom CSS
        title: '', //The Wickedpicker's title,
        showSeconds: false, //Whether or not to show seconds,
        secondsInterval: 1, //Change interval for seconds, defaults to 1
        minutesInterval: 1, //Change interval for minutes, defaults to 1
        clearable: false, //Make the picker's input clearable (has clickable "x")
        beforeShow: null,
        show:
        function positionning() {
            $('#'+input_id).parent().append($('.wickedpicker'));
            $('.wickedpicker').css({'left':'20px','top':'71px'});
        }
    };

    $('.timepicker_fixed#'+input_id).wickedpicker(options_fixed);
}

create_fixed_datepicker('from_time');