Use jQuery UI Position for positioning the Datepicker

[SunboX]

Use jQuery UI's Position class for positioning the Datepicker relative to the Textfield. This is more flexible. You could even choose another element to position against.
This also saves a lot (!) of positioning logic in the zebra_datepicker.js

Demo: https://jqueryui.com/position/
API Docs: http://api.jqueryui.com/position/

So, the setting:

$('.datepicker').Zebra_DatePicker({
    default_position: 'above'
});

will translate to:

$('.datepicker').Zebra_DatePicker({
    position: {
        my: "left bottom",
        at: "left top"
    }
});

And this setting:

$('.datepicker').Zebra_DatePicker({
    default_position: 'below'
});

will translate to:

$('.datepicker').Zebra_DatePicker({
    position: {
        my: "left top",
        at: "left bottom"
    }
});

[bellsolve]

Is this still supposed to work? I would like to position the datepicker below the input box but using the following doesn't work. Have I missed something.

$('.datepicker').Zebra_DatePicker({
    position: {
        my: "left top",
        at: "left bottom",
        of: ".datepicker"
    }
});

Thanks

[stefangabos]

this post was about a suggestion that zebra datepicker to use jQuery UI for positioning
zebra datepicker doesn't use jQuery UI for positioning
as per the docs, you might want to use

$('.datepicker').Zebra_DatePicker({
    default_position: 'below'
});

[bellsolve]

Thanks for your reply. Apologies I misinterpreted the post.

I tried default_position but that moves the datepicker relative to the cursor when what I am looking for is relative to the input.

default_position: 'below' looks like this:

I would like it to look like the image below which is taken from an old site that used a version of the datepicker from 2012.

Can that be done.

Thanks

[stefangabos]

i just pushed version 2.0.0 of the datepicker. with that you can do this

$('.datepicker').Zebra_DatePicker({
    onOpen: function() {
        var properties = this.data('Zebra_DatePicker'),
            $datepicker = properties.datepicker,
            $parent = $(this),
            parent_position = $parent.offset(),
            parent_height = $parent.outerHeight();
            
        $datepicker.css({
            left: parent_position.left,
            top: parent_position.top + parent_height + 5
        });
    }
});

note that the plugin always tries to keep the datepicker inside the view port so it will auto-arrange it if necessary. with this hack that functionality is suppressed

I will look into adding more default positionings options though

[bellsolve]

Yes, that worked, exactly what I needed. Thanks for your prompt response.