Search code examples
javascriptjquerycssdatepickersweetalert2

How bring Datepicker to the front in SweetAlert2?

I use these frameworks:

I want to use both frameworks to enter a date. My problem is that the date picker is in the background of the alert, and also not usable.
This problem, can you find in this fiddle: https://jsfiddle.net/vbfhtzf9/2/

<button>Click me!</button>
<script>
    $(document).ready(function() {
        $('button').click(function(){
            swal({
                html: '<input data-toggle="datepicker" type="text" id="#swal-input1" class="swal2-input">',
                        confirmButtonText: 'Next &rarr;',
                        showCancelButton: true,
                        onOpen: function() {
                            $('[data-toggle="datepicker"]').datepicker({
                                startView: 2,
                                autoHide: true,
                                inline: true,
                            });
                        },
            });
        });
    });
</script>

My question is, did you know a CSS, etc... trick, to bring the Datepicker to the front?

I look forward to your answers!

Solution

  • You need to set the z-index inside the datepicker plugin to be a higher number.

                    onOpen: function() {
                    $('[data-toggle="datepicker"]').datepicker({
                        startView: 2,
                        autoHide: true,
                        inline: true,
                        zIndex: 999999
                    });
                },

    https://jsfiddle.net/2obeLhd8/1/